Ok I have realized that there is a ton of stuff about fading images with javascript, but none of them do what I would like.
Daniel Nolan's DOES.
His script allows me to simply add class=imgover to an image, and the result is a nice image swap. All I have to do is make the second image and add _o at the end of the filename. This is the best and simplest way I've seen. I don't need fancy jQuery transitions and I don't want to add extra markup in my css by adding background images. All I want is a nice fade transition between the images. Trust me I've looked at several jQuery tuts on image swaps.
All of the jQuery tuts I've seen require extra markup per image. I have several images on my page that will need the image swap. Most tuts online assume you only need one image on the page that needs the effect.
How can I add a fade transition to Daniel Nolan's img rollover javascript? I'd like to do that if possible, but I can't seem to get it working.
http://www.dnolan.com/code/js/rollover/
Raw Code
You could do something like this with pure CSS3, no Javascript...
HTML:
<div id="container">
<div id="roll"></div>
<div id="under"></div>
</div>
CSS:
#container {
position:relative;
width:50px; height:20px;
}
#roll {
background:url('http://www.dnolan.com/code/js/rollover/rollover.gif');
cursor:pointer;
opacity:1;
width:50px; height:20px;
position:absolute; z-index:2;
transition: all ease 2s;
-moz-transition: all ease 2s;
-webkit-transition: all ease 2s;
}
#roll:hover {
opacity:0;
transition: all ease 2s;
-moz-transition: all ease 2s;
-webkit-transition: all ease 2s;
}
#under {
background:url('http://www.dnolan.com/code/js/rollover/rollover_o.gif');
width:50px; height:20px;
position:absolute; z-index:1;
}
Demo
This is the best way:
A better implementation of a fading image swap with javascript / jQuery
It has the same premise of Daniel Nolan's script but it has a fade and it's jQuery.
Related
In my webpage, I used CSS to set opacity=0 and transition:opacity linear 0.5s in the body, then used JS to set opacity=1 when the page loads. However, there is a <div> that I want to remain invisible, so I used CSS to set visibility="hidden". If I used opacity, my <div> would appear with the rest of the page.
Is there either
1. A way to set the body's opacity to 1, but not a <div> element inside it (I considered applying opacity to sections around it but I would like the entire page to appear at once)?
2. A way to fade in the text other than opacity (I tried the fadeIn() from jQuery, but I don't think it worked when my visibility was still hidden)?
Apply the visibility:visible for the div:
#main{
visibility: hidden;
}
#child{
visibility: visible;
}
<div id="main">main is not visible
<div id="child">child still visible</div>
</div>
Do opposite if you want child to be invisible and main visible. (But I don't think this is what you want.)
#main{visibility:visible;}#child{visibility:hidden;}
#main visibility is not necessary if this is the case.
The div with opacity set to 0 should still remain invisible, even though the body is now visible.
Refer to my example here:
http://codepen.io/partypete25/pen/rePXag
CSS
body {
opacity:0;
background:red;
transition:opacity linear 2s;
}
div {
width:100px;
height:100px;
background:blue;
opacity:0;
}
JAVASCRIPT
var x = document.getElementsByTagName("BODY")[0];
x.style.opacity = "1";
i made some several html files. at the main page i just wrote down some codes like this
<a href="new.html>
<img src="img/button" id="buttonid">
</a>
when i click the button, i see that the web starts new.html activity. I want to put some smooth page transitions when i open that "new.html". I searched through internet, and found out that most of the page transitions are done by putting other class into format. Whatever, are there any methods for page transitions that can be implemented when using ??
You have to hijack your <a> tag and handle its behaviour through javascript.
FadeOut part
Start with giving it an empty target :
...
So when you click it, nothing happens.
Then, use a custom attribute to store the URL you want to load when clicking this tag :
...
Then add some class that will allow javascript / jQuery to target your link :
...
In your javascript, target your smoothLinks and write a delayed action (using jQuery here) :
$("a.smoothLink").click( function(e){
$("body").fadeOut(function(){ // This will fade out your entire page in about half a second. When it's done, execute the callback function
window.location = e.currentTarget.attributes['data-url'].value;
});
}
However, for performance reasons, I strongly advise you to prefer CSS3 opacity animations (opacity 1 --> 0 --> 1) because, unlike jQuery's fade functions, they're hardware accelerated.
Here's how to do :
(JS)
$("a.smoothLink").click( function(e){
$("body").addClass("fadeOut"); // anything with the "fadeOut" class will become transparent in 1s in our CSS
setTimeout( function(){ // wait 1s, then change URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}
(CSS)
.fadeOut {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
FadeIn part
Once your new page is loaded, it has to be blank, then fade in. Start with making the whole body transparent :
(CSS)
body{
opacity :0;
}
Then, fade it in.
Using the jQuery method :
$("body").fadeIn()
Using the CSS3 method :
In your HTML, give the body a "fadeIn" class :
(HTML)
<body class="fadeIn">
Back to your CSS, write an instruction for fading in anything with the "fadeIn" class :
(CSS)
.fadeIn {
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
So, on page load, your body will gradually get visible in 1 second.
I have to say this in untested, but should be a nice hint :)
EDIT - **
**Simpler solution with a white overlay
Just cover your whole page with a full white overlay, that you can make transparent or opaque at will :
(HTML)
<div id="overlay"></div>
(CSS)
div#overlay{
position: absolute;
z-index:999;
top:0;
left:0;
width: 100%;
height: 100%;
background:white;
pointer-events:none; // so you can click through
opacity : 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
(JS)
$("div#overlay").css("opacity",0); // will fade out the overlay on page load
$("a.smoothLink").click( function(e){
$("div#overlay").css("opacity",1);
setTimeout( function(){ // wait 1s, then change URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}
The only way to make some transition is to use ajax as Jquery Mobile does in example (have a look at http://demos.jquerymobile.com/1.0a4/docs/pages/docs-transitions.html).
There is one way to sort of spoof it, I use Jquery for ease of use here.
in your css set the body tag to display none then with jquery on document load set it to fade in, I've done it at 3 seconds for effect and done an alert etc. muck around with it..
$( "body" ).fadeIn( 3000, function() {
alert('Billys spoofed slow sort of fade in');
$('body').css('color','red');
});
body{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello from fade in</h1>
I hope my question makes sense, but what im trying to do is: show a div by transition. Meaning i want the div to slowly appear from top to bottom or from left to right, almost like a fade. Is this possible with either javascript or jquery?
It is possible, if i understand u need something like this:
http://jsfiddle.net/e5BuX/
$(document).ready(function(){
$(".cube").animate({left:"400px",opacity:"1"},2000);
});
If I understand the question correctly, the closest thing is the jQuery slideUp() or slideDown() methods. they are not a fade exactly, but like I said, probably the closest thing ( I am not a JavaScript/jQuery expert though).
here is a site that demonstrates how they look.
EDIT: Here are some other good examples of custom animations you can do with the animate() method
Hope that helps!
Its possible with vanilla javascript and jQuery.animate but it can also be done entirely css3 transition & animate. Take a look here for example
It can also be done only with css3. Here's a rough ideea.
HTML
<div class="im-a-div animate-me im-hidden">
<span class="center-me">I'm inside the div!</span>
</div>
<input id="show-the-div" type="button" value="Show div"/>
CSS
.im-a-div {
background: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
position: relative;
opacity: 1;
width: 400px;
}
.im-hidden {
margin-top: -100%;
opacity: 0;
}
.animate-me {
-webkit-transition: all 1000ms 0s ease-in-out;
-moz-transition: all 1000ms 0s ease-in-out;
-ms-transition: all 1000ms 0s ease-in-out;
transition: all 1000ms 0s ease-in-out;
}
Simple (but not for me!) angularjs show/hide animation problem.
I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge".
First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/
The challenge: can anyone make those images fade in and out over each other, rather than appearing below or above the currently shown image, then popping into place once the upper image's div is hidden?
The HTML:
<div>
<div data-ng-repeat="k in kitties" >
<img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
</div>
</div>
CSS:
.animate-show, .animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show {
opacity:0;
}
.animate-show.animate-show-active {
opacity:1;
}
.animate-hide {
opacity:1;
}
.animate-hide.animate-hide-active {
opacity:0;
}
I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.
Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.
FYI - this is using angular 1.1.5
Thank you!!! Adam
You actually have it all correct! You're just missing a little CSS.
I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.
The bulk of the new stuff is:
.container{
position: relative;
/* you have to add a height here if your container isn't otherwise set
becuse the absolutely positioned image divs won't calculate the height
for you */
height: 100px;
}
.image-repeat{
position: absolute;
top: 0;
left: 0;
}
With the classes applied in your HTML as needed.
Check it out: http://jsfiddle.net/QErPe/2/
Hope that helps!
This appears to actually be more of a CSS problem than an angular problem. You need to position the two divs on top of each other and make sure that they are actually occupying the same space at the same time. After that the cross-fading should be a piece of cake.
You can also do plain CSS3 on the .ng-hide class. For example:
div img {
border: medium none;
margin: 0;
padding: 0;
opacity: 1;
-webkit-transition: opacity 1s ease 0s;
-moz-transition: opacity 1s ease 0s;
-o-transition: opacity 1s ease 0s;
transition: opacity 1s ease 0s;
}
div img.ng-hide {
opacity: 0;
}
So now, when the ng-hide class is added, it will fade the opacity of the image. ngAnimate has it's place, but with simple CSS3 on the .ng-hide class, you can eliminate the frustrations.
I'm trying to replicate this effect using CSS effects or transitions.
Using animations I can animate the opacity, but only fadeIn, and the height (which should control the slide) doesn't seem to work at all :(
The closest I've got is by using javascript to set a temporary class on the element I want to animate, and on which I apply the initial opacity. But height doesn't work either. And there seems to be a slight delay on animation start.
Any other ideas?
So I ended up using the solution posted in the question Simon mentioned: With javascript I wrap the element I want to animate within a "wrapper" DIV on which I apply the animation. The wrapper will get its height changed from 0 to the height of the content DIV every time the label is clicked:
fiddle here
I know it requires some javascript, but the idea is to make the animation in CSS, and this is what it does. And if JS is disabled, the toggle will still work...
You can't currently animate on height when one of the heights involved is auto, you have to set two explicit heights. There's an extensive workaround posted as an answer to this similar question.
I made an alteration to your JS Fiddle, I beleive this is what you want; please see it here.
You need to specify a height on the div originally (0) and don't forget overflow:hidden; so that the content doesn't 'spil out' of the div. You will still need jQuery / Javascript however, to toggle a class but it means much less Javascript is required. (I toggled the class "change" which you will see on that fiddle)
input {
display:none;
}
label {
display:inline-block;
}
div {
white-space: pre;
background: #eee;
color: #333;
overflow:hidden;
height:0;
opacity:0;
-moz-transition:height 1s opacity 1s;
-webkit-transition:height 1s opacity 1s;
-o-transition:height 1s opacity 1s;
-ms-transition:height 1s opacity 1s;
transition:height 1s, opacity 1s;
}
.changed {
height:200px;
opacity: 1;
}
I added a few vendor prefixes to the transition CSS propery as I'm not sure what browser you'll be using and I'm on firefox so I need the -moz- prefix lol :)
The only problem I can see with this is that height:auto or height:100% doesn't animate, so you'll need to specify ems or px... If this is going to be a problem (like if the content will be dynamic), I would advise using jQuery for the height animation.