jQuery改变图像src与淡入淡出效果

我想创建一个效果，你点击一个缩略图图像，链接到缩略图将取代主图像，但淡入它。这是我的代码目前正在使用：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); 
    }); 
});

这可以工作并替换没有淡入淡出效果的图像。我需要改变什么才能使淡入效果起作用？

来源

2011-05-12 WebDevDude

您必须首先将它制作为，或者将其隐藏起来。

试试这个：

$(".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。

Here's a jsFiddle example.

来源

2011-05-12 14:34:09 Sylvain

不能淡入的东西，已经是100％的α-:)

换句话说，你要么淡出出来或隐藏它，然后消除它。

我做了这个例子，我基本上把它隐藏然后消除它：

http://jsfiddle.net/uGFMt/

来源

2011-05-12 14:34:51 jackJoe

我的事情，而不是我们的如果使用淡入和淡出，则最好使用淡入淡出功能作为淡入和淡出在它们之间创建一个时间间隔几微秒。

上面我已经从维尔托德代码中使用：感谢他

$("#link").click(function() { 

    $("#image").fadeTo(1000,0.30, function() { 
     $("#image").attr("src",$("#link").attr("href")); 
    }).fadeTo(500,1); 
    return false; 
});

来源

2013-05-23 12:36:34

我有同样的问题;感谢您的修复。 – 2014-04-15 15:36:37

我在为Firefox进行fadeIn/fadeOut工作时遇到了问题。该解决方案适用于所有浏览器。谢谢！ – DIG 2015-04-09 17:53:33

这对我更好。谢谢！ – 2015-06-18 07:24:23

我转载上述给定的样本。它给出了一种奇怪的闪烁，我发现它在不透明度恢复到1之后等待图像加载。我通过Sandeep修改了代码。

$("#link").click(function() { 

$("#image").fadeTo(1000,0.30, function() { 
    $("#image").attr("src",$("#link").attr("href")); 
    $("#image").on('load', function(){ 
    $("#image").fadeTo(500,1); 
    }); 
}); 
return false; 
});`

来源

2016-10-19 14:34:16

jQuery改变图像src与淡入淡出效果

回答

相关问题