使用jQuery延迟更改CSS属性 [英] Using jQuery to change CSS attributes with delay

问题描述

如何使用 jQuery 来延迟更改 HTML 元素的 CSS 属性。

想象一下这种情况。我有一个 div ，其中 bg color blue。我希望它淡出，当它消失时，我希望 bg color 为红色。

I （div）。fadeOut（）。delay（500）.css（background-color ， 红色）淡入（）;

淡入淡出之前，它已经将颜色更改为红色，然后淡入。链接事件的序列。我怎么能在一行中做到这一点。

解决方案

您可以使用 queue 功能 ：

  $（div）
 .fadeOut（）
 .delay（500）
 $ .queue（function（）{
 $（this）.css（background-color，red）。dequeue（）; 
}）
 .fadeIn（）; 
  

请注意回调中的 dequeue 这是告诉jQuery继续处理队列中的下一个事情。

How can i use jQuery to change the CSS attributes of a HTML element with delay.

Imagine this scenario. I have a div with bg color blue. I want it to fade out and when it fades back in i want the bg color to be red.

I tried this.

$("div").fadeOut().delay(500).css("background-color","red").fadeIn();

While fading out the div already changes the color to red before it fades in. It does not follow the sequence of chained events. How can I make this happen in one single line.

解决方案

You can have any function participate in the animation queue using the queue function:

$("div")
    .fadeOut()
    .delay(500)
    .queue(function() {
        $(this).css("background-color","red").dequeue();
    })
    .fadeIn();

Note the dequeue call within the callback, which is what tells jQuery to continue with the next thing in the queue.

这篇关于使用jQuery延迟更改CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！