SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    0 Post(s)
    0 Thread(s)

    jquery image swap with fade in and fade out

    I have a page with four images side by side. What I would like to do is use jquery to fade out the current image and fade in a new one as a hover effect on each image. I didn't want to do it with just plain css and image sprites because I wanted a smoother effect.

    I tried using this code. I could get the images to switch but couldn't figure out how to add the fade in and fade out to the images.

    jQuery(document).ready(function($) {
    //rollover swap images with rel 
      var img_src = "";
      var new_src = "";
          img_src = $(this).attr('src'); //grab original image
          new_src = $(this).attr('rel'); //grab rollover image
          $(this).attr('src', new_src); //swap images
          $(this).attr('rel', img_src); //swap images 	 
          //mouse out
          $(this).attr('src', img_src); //swap images
          $(this).attr('rel', new_src); //swap images	 
      //preload images
        var cache = new Array();
        //cycle through all rollover elements and add rollover img src to cache array
          var cacheImage = document.createElement('img');
          cacheImage.src = $(this).attr('rel');
    Last edited by waldo567; Mar 5, 2012 at 21:36. Reason: forgot code


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts