开发者

Adding a fade transition to Daniel Nolan's img rollover javascript

开发者 https://www.devze.com 2023-04-01 04:44 出处:网络
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.

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消