将淡入淡出效果添加到图像交换

我正在寻找解决方案，以便在交换图像时为几张图像添加漂亮的淡入淡出效果。我是jquery的新手，已经看到了许多解决方案，但仅用于单张图片而不是多张图片。尝试使用z-index技术，但将所有图片置于彼此之上。将淡入淡出效果添加到图像交换

我正在使用这个jQuery代码来交换图像。

$(document).ready(function(){ 



// jQuery image change on hover 
$("ul#aside li a img") 
    .mouseover(function() { 
     var src = $(this).attr("src").match(/[^\.]+/) + "over.png"; 
     $(this).attr("src", src); 
    }) 
    .mouseout(function() { 
     var src = $(this).attr("src").replace("over", ""); 
     $(this).attr("src", src); 

    }); 
});

任何帮助或提示，非常感谢。

来源

2011-09-30 NielsPilon

$("ul#aside li a img") 
    .mouseover(function() { 
     var src = $(this).attr("src").match(/[^\.]+/) + "over.png"; 
     var $this = $(this); 
     $this.fadeOut("fast", function() { 
      $this.attr("src", src).fadeIn("slow"); 
     }); 
    }) 
    .mouseout(function() { 
     var src = $(this).attr("src").replace("over", ""); 
     var $this = $(this); 
     $this.fadeOut("fast", function() { 
      $this.attr("src", src).fadeIn("slow"); 
     }); 

    }); 
});

来源

2011-09-30 14:38:41

我认为这是淡入淡出和那 –

工作是它只有点粗糙过渡。它也看起来像是交换，删除，并再次显示。你可以在这里看到它的生活http://nielspilonwebdesign.nl/dev/adri – NielsPilon

@NielsPilon ...修改我的答案，使用淡出的完整回调...试一试。它应该过渡得更好。 –

尝试这样的事情

$(this).hide(); 
    $(this).attr("src", src); 
    $(this).fadeIn();

.fadeOut()会褪色的图像进行

来源

2011-09-30 14:39:32

将淡入淡出效果添加到图像交换

回答

相关问题