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 ass开发者_StackOverflow中文版ume 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.
精彩评论