Question

我知道你可以这样做：

$('#item').fadeOut().delay(1000).fadeIn();

将淡出带有项目ID的元素，然后等待一秒钟，然后再将其淡入。但有没有办法将一个项目淡出而另一个项目在中间延迟。我试过这个，但它不起作用：

$('#item1').fadeOut().delay(1000).('#item2').fadeIn();

任何帮助非常感谢

由于

Answer 1

使用回调函数：

$("#item1").fadeOut( function()
{
  $("#item2")
          // Wait for 600 ms 
          .delay(600)
          // Fade in
          .fadeIn();
});

请参阅文档：http://api.jquery.com/fadeIn/

fadeIn（[duration]，[easing]，[callback]）

持续时间确定动画运行时间的字符串或数字。

easing一个字符串，指示用于转换的缓动函数。

callback动画完成后调用的函数。

Answer 2

淡化回调中的第二个元素，给它延迟而不是第一个元素。

如果您希望延迟在第一个元素开始淡出时计数，则从总延迟中减去衰落速度：

// Assuming default fading speed of 400 ms
var speed = 400, delay = 1000;

$('#item1').fadeOut(speed, function() {
    $('#item2').delay(delay - speed).fadeIn(speed);
});

如果您想在第一个元素完成动画后计算延迟，请使用完整的延迟值：

$('#item1').fadeOut(speed, function() {
    $('#item2').delay(delay).fadeIn(speed);
});

Answer 3

 setTimeout(function() {  $('#item1').fadeOut();}, 500);
 setTimeout(function() {  $('#item2').fadeIn(); }, 1000);

具有多个选择器的jQuery延迟

3 个答案: