jQuery 使用淡入淡出效果更改图像 src

Question

我正在尝试创建一个效果，您单击缩略图，缩略图的链接将替换主图像，但将其淡入。这是我当前使用的代码:

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

这可以工作并替换图像，而不会产生淡入淡出效果。我需要更改什么才能使淡入效果发挥作用？

Answer 1

您必须首先使其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.

编辑:您可以在 Sandeep Pal's anwser 中找到更新且更好的解决方案。