Question

我试图在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;
}

Answer 1

toggleClass不会为必须使用JQuery的动画方法的样式属性设置动画。

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

Answer 2

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

检查docs。

Answer 3

toggleClass功能不起作用。您正在寻找的行为是通过jQuery UI switchClass函数完成的。

Answer 4

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

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

toggleClass问题的jQuery持续时间

4 个答案: