如何使用jQuery更改“ div”背景和文本颜色以闪烁消息并恢复为原始颜色？

Question

我有一个id和class名称为tab的div 。 css是为div定义的。 原始background-color为蓝色， color为白色。 我需要在此div上闪烁一些文本，该消息应闪烁3次，黑色背景和白色文本，反之亦然。

我尝试过toggleClass 。 使用此效果会生成，但不会还原先前的类css。

我也尝试过淡入$("#tab").fadeOut(200).fadeIn(200); ，它可以帮助眨眼的部分，但无法达到预期的效果。

请提出建议...预先感谢。

到目前为止，这是我尝试过的：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/styles.css">

<style type="text/css">
.backgroundRed
{
    background-color: #cccccc;
    color: red;
}
.blink
{
    background-color: black;
    color: white;
}
</style>

<script type="text/javascript">

$(document).ready(function(){
var flg = 0;

$.fn.blink = function()
{ 
    var i = 0;

        for(var i = 0; i <= 3; i++)
            { 
                // attempt#1 // 
                //blinking works well with this ////
                //$("#test").fadeOut(200).fadeIn(200);

                // attempt#2 // 
                //changes looks good but doesnt revert back to original class ////
                //$(".backgroundRed").toggleClass("blink");
                //$("#test").removeClass("blink");
                //$("#test").addClass("backgroundRed");

                // attempt #3 //
                // doesnt work correctly        
            if(i >= 3) 
                {
                    $("#test").fadeOut(200).fadeIn(200);
                    $("#test").removeClass("blink");
                    $("#test").addClass("backgroundRed");
                }
                else
                {
                    $("#test").fadeOut(200).fadeIn(200);
                    $("#test").removeClass("backgroundRed");
                    $("#test").addClass("blink");
                }
            }



}

$("#tab").click(function(){

    $.fn.blink();

});


});




</script>

<html>
<body>

<div id="test" class="backgroundRed" style="height: 200px; width: 400px; ">

<h1>test value</h1>

</div>

<button id="tab">click</button>

</html>

Answer 1

这样的事情怎么样：

http://jsfiddle.net/sydzL8Lc/21/

使用https://github.com/madbook/jquery.wait ，因为你想眨眼3次

$("#test").addClass("blink").wait(400).removeClass("blink").wait(400).addClass("blink").wait(400).removeClass("blink");

Answer 2

使用此眨眼（）

     function blink(){    
        var i = 0;
        var obj = setInterval(function(){
            if(i == 5)
            {
                $("#divtoBlink").removeClass("backgroundRed");
                clearInterval(obj);
            }else{
                $("#divtoBlink").toggleClass("backgroundRed");
            }
            i++;
         },100)
    }

演示

如何使用jQuery更改“ div”背景和文本颜色以闪烁消息并恢复为原始颜色？

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-09-15 13:42:19

解决方案2
1 2014-09-15 14:18:23

如何使用jQuery更改“ div”背景和文本颜色以闪烁消息并恢复为原始颜色？

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-09-15 13:42:19

解决方案2 1 2014-09-15 14:18:23

解决方案1
1 已采纳 2014-09-15 13:42:19

解决方案2
1 2014-09-15 14:18:23