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

Question

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

score 0 · Answer 1 · answered Aug 30 '11 at 05:41

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

Thank you, is there any disadvantage to doing this as far as loading time of the images (or when they are loaded)? — davecave, Aug 31 '11 at 02:17
Ok I've abandoned the CSS3 transitions for now. How can I simply add a fade to Nolan's script? I like his script a lot so I would like to keep it. — davecave, Sep 04 '11 at 06:53

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

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.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 29 '12 at 04:57

davecave

4,698
6
26
32

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

2 Answers2