jQuery改变图像src与淡入效果

我试图创建一个效果，你点击缩略图，缩略图的链接将替换主图像，但淡入它。这是我目前使用的代码：

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgurL = $(this).attr("href");
    $(".boat_listing .maingallery").fadeIn(400,function() {
        $(".boat_listing .maingallery").attr('src',$imgurL);
    });
});

这工作和替换的图像没有淡入淡出效果。我需要改变什么以使fadeIn效果工作？

解决方法

你必须先使它fadeOut()或隐藏它。

尝试这个 ：

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgurL = $(this).attr("href");
    $(".boat_listing .maingallery")
        .fadeOut(400,function() {
            $(".boat_listing .maingallery").attr('src',$imgurL);
        })
        .fadeIn(400);
});

它应该淡出图像，然后在隐藏时更改src，然后淡入淡出。

Here’s a jsFiddle example.

原文地址：https://www.jb51.cc/jquery/183563.html