Javascript CSS时间
我想用jQuery运行一个CSS动画，添加一个带有过渡=0但更改颜色的类，然后立即删除这个类，这样(使用原始过渡= 2s)它就会逐渐变成原来的颜色。
下面是我要说的一个小例子，为什么blue1()函数不起作用？我假设javascript代码执行得如此之快，以至于元素永远不会添加新的类，但我现在确定这是如何在场景后面工作的。如果我添加这个类，然后等待一段时间并删除这个类，它就可以工作了(blue2())...有没有更好的方法来实现这一点？解决这个问题的最好方法是什么？
谢谢。
Codesnippet：
function blue1(){
$("#element").toggleClass("blue");
$("#element").toggleClass("blue");
}
function blue2(){
$("#element").toggleClass("blue");
setTimeout(function(){
$("#element").toggleClass("blue");
}, 1000);
}#element{
width:100px;
height:100px;
background:red;
transition:2s;
}
#element.blue{
background:blue;
transition:0s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="element"></div>
<button id="button" onclick="blue1();">Run without delay</button>
<button id="button2" onclick="blue2();">Run with delay</button>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2016-10-17 20:49:25
function blue1(){
var transition = $("#element").is(".delayRed");
if(transition){
$("#element").removeClass("delayRed");
}else {
$("#element").toggleClass("red");
}
}
function blue2(){
var alreadyRed = $("#element").is(".delayRed");
if(!alreadyRed){
setTimeout(function(){
$("#element").toggleClass("delayRed");
}, 1000);
}
}#element{
width:100px;
height:100px;
background:blue;
}
#element.red{
width:100px;
height:100px;
background:red;
}
#element.delayRed{
width:100px;
height:100px;
background:red;
transition:2s;
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="element"></div>
<button id="button" onclick="blue1();">Run without delay</button>
<button id="button2" onclick="blue2();">Run with delay</button>
</body>
</html>
我更新了它，以满足Bruno的要求，我添加了一个额外的CSS，这样你就可以在两种颜色之间切换，警告是，如果正方形的颜色已经有红色类，你就不能转换到红色。
文档：
is()
Stack Overflow用户
发布于 2016-10-17 20:53:25
你的想法不起作用的原因是因为jQuery并不关心你的类是否有一个转换来淡入蓝色的背景。
当您运行toggleClass()时，它会查看元素并添加或删除类。在你的第一个调用中，它会添加它，在你的第二个调用中，它会看到这个类存在，这意味着它会立即删除它。删除这个类也会终止你可能已经运行过的任何转换。
如果你想要做的只是改变背景颜色，一个更好的方法是使用jQuery转换和适当的选择器来获得按钮，而不是在html中添加函数。如下所示：
$('#button1').onclick(function() {
$(this).animate({
background: 'blue'
}, 2000, function() {
$(this).animate({
background: 'red'
}, 2000);
});
});上面的代码为单击您的按钮设置了一个事件侦听器，然后使用.animate()方法将此元素的背景属性动画化为蓝色。我们在这个函数上设置了一个回调函数，在2秒后转换回红色。更改其他计时的动画数字，我建议您查看下面的animate()方法的文档。
http://api.jquery.com/animate/
https://stackoverflow.com/questions/40086349
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号