SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    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.
    Thanks

    Code:
    jQuery(document).ready(function($) {
     
    //rollover swap images with rel 
      var img_src = "";
      var new_src = "";
     
        $(".rollover").hover(function(){
          //mouseover
     
          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 	 
        },
        function(){
          //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
        $(".rollover").each(function(){
          var cacheImage = document.createElement('img');
          cacheImage.src = $(this).attr('rel');
          cache.push(cacheImage);
        }); 
    });
    Last edited by waldo567; Mar 5, 2012 at 21:36. Reason: forgot code


Bookmarks

Posting Permissions

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