Question

我对.attr jQuery方法有疑问。我想在点击时创建4个事件：淡出，延迟，更改src属性和淡入。我有这段代码：

$( "#button" ).click(function() {   
    $('img').fadeOut().delay(800).attr('src','1-big.jpg').fadeIn();      
});

但是当我点击按钮时，图像会立即改变，然后逐渐淡出，延迟和淡化。为什么.attr方法首先运行？

Answer 1

使用回调来帮助强制执行函数运行的顺序 -

$( "#button" ).click(function() { 
    $('img').fadeOut(800, function() {
        $(this).attr('src','1-big.jpg').fadeIn();      
    })
});

Answer 2

延迟函数只能用于延迟jQuery效果，或者更准确地说，可以用于使用效果队列的函数。因此，将立即更改src属性。

在这种情况下，您可以在fadeOut完成回调后运行一个函数，更改src属性，然后在淡入之前延迟：

// default fadeOut time is 400ms, which now needs to be included
$('img').fadeOut(400, function() {
    $(this).attr('src','1-big.jpg').delay(800).fadeIn();
});

预加载图像也是一个好主意，以防万一在800毫秒内无法下载。

Answer 3

您可以使用动画回调：

$('#button').click(function() {
  $('img').fadeOut(function() {
    $(this).attr('src', '1-big.jpg');
    $(this).fadeIn();
  });
});

也许值得考虑DeSandro的imagesLoaded插件：https://github.com/desandro/imagesloaded

fadeOut然后改变图像

3 个答案: