jQuery使用渐变效果更改图像源

oyt4ldly 于 2023-08-04 发布在 jQuery

关注(0)|答案(4)|浏览(102)

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

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

字符串
这将工作并替换图像，而不会产生淡入淡出效果。我需要做哪些更改才能使淡入效果生效？

jquery

来源：https://stackoverflow.com/questions/5979418/jquery-change-image-src-with-fade-effect

4条答案

按热度按时间

ntjbwcob1#

你必须先把它设为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);
});

字符串
它应该fadeOut图像，然后改变src时，它的隐藏，然后fadeIn。
Here's a jsFiddle example.

**编辑：**您可以在Sandeep Pal's anwser中找到更新和更好的解决方案

赞(0）回复(0）举报 2023-08-04

falq053o2#

我认为，而不是使用淡入和淡出，它是更好地使用fadeTo功能的淡入和淡出创造了一个时间差距，他们之间的几微秒。
我使用了Sylvain的上述代码：多亏了他

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

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

字符串

赞(0）回复(0）举报 2023-08-04

xxb16uws3#

我复制了上面的样本。它给出了一个奇怪的 Flink ，我发现它等待图像加载后，它的不透明度恢复到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;
});`

字符串

赞(0）回复(0）举报 2023-08-04

s8vozzvw4#

你不能淡入已经是100% alpha的东西：）
换句话说，你要么淡出它，要么隐藏它，然后淡入。
我做了这个例子，基本上，我隐藏它，然后淡出它：
http://jsfiddle.net/uGFMt/

赞(0）回复(0）举报 2023-08-04