jQuery使用淡入淡出效果更改图像src [英] jQuery Change Image src with Fade Effect

问题描述

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

I'm trying to create an effect where you click on a thumbnail image, and the link to the thumbnail will replace the main image, but fade it in. This is the code I'm currently using:

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

这样可以替换图像而不会出现淡入淡出效果。我需要更改什么来使fadeIn效果起作用？

This works and replaces the image without a fade effect. What do I need to change to get the fadeIn effect to work?

推荐答案

你必须使它 fadeOut（）首先或隐藏它。

You have to make it fadeOut() first, or hide it.

试试这个：

$(".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);
});

它应该 fadeOut 图像，然后更改 src 隐藏时，然后 fadeIn 。

It should fadeOut the image, then change the src when it's hidden, and then fadeIn.

这是一个jsFiddle示例。

这篇关于jQuery使用淡入淡出效果更改图像src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！