Question

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

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

这样可以在没有淡入淡出效果的情况下替换图像。我需要更改什么才能使fadeIn效果起作用？

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);
});

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

Here's a jsFiddle example.

修改：您可以找到更新的＆amp; Sandeep Pal's anwser

中更好的解决方案

Answer 2

我不是使用FadeIn和fadeOut，而是更好地使用fadeTo功能 fadeIn和fadeOut在它们之间创建了一个时间间隔，持续几微秒。

我使用了Sylvain的上述代码：感谢他

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

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

Answer 3

我复制了上面给出的样品。它给出了一个奇怪的闪烁，我发现它在它的不透明度恢复到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;
});`

Answer 4

你不能淡入已经达到100％alpha的东西：）

换句话说，你要么将其淡出或隐藏它，然后将其淡入。

我做了这个例子，基本上，我隐藏它然后淡化它：

http://jsfiddle.net/uGFMt/

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

4 个答案: