Question

我有一个图片列表（<img>），我在下面的代码中进行迭代

$('.img').each(function(key,value){

  (function(){

    $(value).fadeOut('slow');
    $(value).attr('src','images/new.png');
    $(value).fadeIn('slow');

  })()

})

问题是 - 如何更改属性然后调用fadeOut/fadeIn函数。在这种情况下 - 首先，属性会发生变化，而且两种效果都会起作用。

Answer 1

使用fadeOut回调; fadeOut 启动淡出过程，但它会继续并完成异步（稍后）。此外，不需要内部功能：

$('.img').each(function(key,value){
    var $value = $(value);
    $value.fadeOut('slow', function() {      // Note we're using
        $value.attr('src','images/new.png'); // the callback
        $value.fadeIn('slow');               // to run this
    });
});

或者：

$('.img').each(function(key,value){
    $(value).fadeOut('slow', function() {
        $(this).attr('src','images/new.png')
               .fadeIn('slow');
    });
});

如果该图像（images/new.png）可能不在缓存中，则最好预先缓存它。否则，fadeIn可能会在加载图像之前启动。等待图片上的load事件可能会出现问题，尤其是在您正在更改img的现有src元素上。如果您想等待load，我可能会完全替换img，如下所示：

$('.img').each(function(key,value){
    $(value).fadeOut('slow', function() {
        $("<img class=img>")
            .on("load", function() { // Note hooking load BEFORE setting src
                $(this).fadeIn('slow');
            })
            .attr("src", "images/new.png")
            .hide()
            .replaceAll(this);
    });
});

...但只是简单地预先解决它。

实例：

$('.img').each(function(key, value) {
  $(value).fadeOut('slow', function() {
    $("<img class=img>")
      .on("load", function() { // Note hooking load BEFORE setting src
        $(this).fadeIn('slow');
      })
      .attr("src", "https://www.gravatar.com/avatar/1c9adcda917a5646e8ebe93738d23a3f?s=328&d=identicon&r=PG&f=1")
      .hide()
      .replaceAll(this);
  });
});

<img class="img" src="https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=328&d=identicon&r=PG">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

这是因为动画是异步执行的。

正如评论中提到的那样，您需要使用selector:中的回调参数：

fadeOut

Answer 3

您可以将javascript .promise()与jquery一起使用，您可以将其用作$.when()

$('.img').each(function(key, value) {
    $.when($(value).fadeOut()).done(function() {
        $(value).attr('src', 'https://www.gravatar.com/avatar/1c9adcda917a5646e8ebe93738d23a3f?s=328&d=identicon&r=PG&f=1').fadeIn();
   })
});

＆＃13;

$('.img').each(function(key, value) {
  $.when($(value).fadeOut()).done(function() {
    $(value).attr('src', 'https://www.gravatar.com/avatar/1c9adcda917a5646e8ebe93738d23a3f?s=328&d=identicon&r=PG&f=1').fadeIn();
  })
});

＆＃13;

<img class="img" src="https://www.gravatar.com/avatar/62c8139675bef978e1d92c816f052262?s=328&d=identicon&r=PG&f=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何更改函数调用顺序

3 个答案: