在隐藏和显示之间暂停

Question

 $(".swap-image-1a").hide();
 $(".swap-image-1b").show().sleep(3000);
 $(".swap-image-1b").hide();
 $(".swap-image-1a").show().sleep(3000);
 $(".swap-image-1a").hide();
 $(".swap-image-1c").show();

有人可以告诉我如何正确地使这些图像在隐藏和显示之间暂停吗？非常感谢。

Answer 1

您可以使用回调函数：

$(".swap-image-1b").show(3000, function() {
  $(".swap-image-1b").hide();
});

.hide()和.show()方法接受下一个参数：

---

  

.show( [duration ] [, complete ] )

     

持续时间（默认值：400）

     

类型：数字或字符串一个字符串或数字，确定字符串的长度。   动画将运行。

     

完成

     

类型：Function（）动画完成后要调用的函数，   每个匹配的元素调用一次。

---

  

.show( options )

     

选项

     

类型：PlainObject传递给该方法的其他选项的映射。

您可以在文档中找到更多详细信息：

• .hide()
• .show()

Answer 2

您可以指定$ .show（）和$ .hide（）函数的持续时间。

$('#example').show(1000) // 1 second

Answer 3

在隐藏之后和显示之前，而不是显示之后，您应该使用sleep()方法。

 $(".swap-image-1a").hide().sleep(3000);
 $(".swap-image-1b").show();
 $(".swap-image-1b").hide().sleep(3000);
 $(".swap-image-1a").show();
 $(".swap-image-1a").hide().sleep(3000);
 $(".swap-image-1c").show();

您还可以将hide()方法的持续时间指定为第一个参数。

 $(".swap-image-1a").hide(3000);//3 seconds
 $(".swap-image-1b").show();
 $(".swap-image-1b").hide(3000);
 $(".swap-image-1a").show();
 $(".swap-image-1a").hide(3000);
 $(".swap-image-1c").show();

请参阅文档：

.hide()

.show()