在隐藏和显示之间暂停

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

Can someone show me how to properly make these images pause between hiding and showing them? Thanks so much.

Answer 1

You could use a callback function:

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

The .hide() and .show() methods accepts the next params:

---

.show( [duration ] [, complete ] )

duration (default: 400)

Type: Number or String A string or number determining how long the animation will run.

complete

Type: Function() A function to call once the animation is complete, called once per matched element.

---

.show( options )

options

Type: PlainObject A map of additional options to pass to the method.

You can find more details in the documentation:

• .hide()
• .show()

Answer 2

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

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

Answer 3

You should use the sleep() method after hiding and before showing, not after showing.

 $(".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();

You can also specify the duration for the hide() method as the first argument.

 $(".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();

See the documentation:

.hide()

.show()