Delay () should be used with setTimeout in my mind. I never imagined that they are actually different.
Delay () can only play a role in the animation queue, while setTimeout () is the real latency.
For example ):
$ (". Next"). click (->
$ (". Main ul li" mirror.css "opacity", "0"
SetTimeout (->
$ (". Main ul li" mirror.css "opacity", "0.7"
, 1000)
)
Here I need to set the opacity latency, so we can't use delay (), and the css () method is not an animation.
The. delay () method added in jQuery1.4 allows us to delay the execution of functions in the queue. It can delay the execution of functions in the animation queue or customize the queue. Only continuous events in the queue are delayed. For example,. show () or. hide () without parameters are not delayed because they do not use the effect queue.
The time delay (duration parameter) is in milliseconds. The larger the value, the slower the animation, not the faster. The 'Fast 'and 'low' strings represent the latency of 200 and 600 milliseconds, respectively.
For example, you can set a latency of 800 milliseconds between the. slideUp () and. fadeIn () animations of <div id = "foo">:
$ ('# Foo'). slideUp (300). delay (800). fadeIn (400 );
When this statement is executed, the animation will be rolled up in 300 milliseconds, and the animation will be paused in 800 milliseconds, and then the animation will be played down in 400 milliseconds.
. Delay () is the best in jQuery animation effects and similar queues. However, due to its own restrictions, such as the failure to cancel the delay --. delay (), it is not a substitute for the native setTimeout function of JavaScript, which may be more suitable for some use cases.
Example:
Hide and then display the two divs. The green div has a latency of 800 milliseconds before it is displayed.
<! DOCTYPE html>
<Html>
<Head>
<Style>
Div {position: absolute; width: 60px; height: 60px; float: left ;}
. First {background-color: #3f3; left: 0 ;}
. Second {background-color: # 33f; left: 80px ;}
</Style>
<Script src = "http://code.jquery.com/jquery-latest.js"> </script>
</Head>
<Body>
<P> <button> Run </button> </p>
<Div class = "first"> </div>
<Div class = "second"> </div>
<Script>
$ ("Button"). click (function (){
$ ("Div. first"). slideUp (300). delay (800). fadeIn (400 );
$ ("Div. second"). slideUp (300). fadeIn (400 );
}); </Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
