gpt4 book ai didi

javascript - 如何使用 jquery 更改 'div' 背景和文本颜色以闪烁消息并恢复为原始颜色?

转载 作者:行者123 更新时间:2023-12-02 16:59:44 24 4
gpt4 key购买 nike

我有一个 div,其 id 和类名称为 tabcss 是为 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>

最佳答案

像这样怎么样:

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

关于javascript - 如何使用 jquery 更改 'div' 背景和文本颜色以闪烁消息并恢复为原始颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25849042/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com