Search jQuery

jQuery Forum

in Using jQuery • 14 years ago

I want to make a image fade in on click of a link, for example like this:

http://www.wakeupmrsingh.com/

I found this script I could use:

http://www.dynamicdrive.com/dynamicinde ... bnail2.htm

Then I found this js script I could use to fade in the image, but I don't know how to put the codes together:

http://clagnut.com/sandbox/imagefades/

How can I put the codes togther, and make a image fade in/out on click? Am I using the wrong codes?

HELP PLEASE!

Replies(1)

14 years ago

You don't need any plug-ins for this. jQuery has built-in fading animations. See http://docs.jquery.com/Effects

Here's an example:

: <script type="text/javascript"> $(document).ready(function(){ $(ul#imageLinks a').click(function(){ newImage = this.id.replace('Link', ''); if(currentImage){ $('#currentImage').fadeOut('slow'); } currentImage = newImage; $('#currentImage').fadeIn('slow'); }); }); </script> <ul id="imageLinks"> <li><a id="imageLink1">Image 1</a></li> <li><a id="imageLink2">Image 2</a></li> </ul> <img id="image1" src="/path/to/image1.jpg" style="display:none;" /> <img id="image2" src="/path/to/image2.jpg" style="display:none;" />

There are many ways you could achieve this besides my example above.