toggleClass 问题的 jQuery 持续时间答案

【问题标题】：jQuery duration for toggleClass issuetoggleClass 问题的 jQuery 持续时间
【发布时间】：2023-04-01 00:34:02
【问题描述】：

我正在尝试在 1 秒内更改 div 元素的样式类并产生一些效果。这是我的代码。当我执行此示例时，样式会立即切换，而不会产生影响和超时。我做错了什么？

<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.js"></script> 
<script type="text/javascript">
$().ready(function() {
$("#changeStyle").click(function() {
$("#divka").toggleClass("a1","slow");
return false;
});
});
</script>
<link rel="stylesheet" href="style.css" type="text/css"/>


</head>
<body>
<div id="divka"></div>
<input type="button" id="changeStyle" value="change style"/>
</body>



.a1 {
border: 1px solid black;
background-color:#eee;
width:200px;
height:400px;
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

toggleClass 不对样式属性进行动画处理，你必须使用 JQuery 的 animate 方法。

$("#divka").animate({
borderWidth: "1px",
borderColor: "#000",
borderStyle: "solid",
backgroundColor:"#eee",
width:"200px",
height:"400px",
}, 500);

【讨论】：

好的。谢谢。但是，如果 css 不是那么琐碎，那又如何呢？这是唯一的方法吗？
是的，这是为任何 dom 元素的多种样式设置动画的唯一方法。

【解决方案2】：

toggleClass 与类似“慢”的参数无关 - 这对于使用动画的方法有效。

检查docs。

【讨论】：

【解决方案3】：

toggleClass 函数不能这样工作。您正在寻找的行为是通过 jQuery UI switchClass 函数完成的。

【讨论】：

【解决方案4】：

您可以使用 addClass() 或 switchClass() 这是 odf jquery UI 的一部分：

$("#divka").addClass("a1",500);

【讨论】：