Geek Answers Handbook

JQuery duration for toggleClass problem

I am trying to change the div element style class within 1 second with some effect. This is my code. When I run this example, the styles switch immediately without effects and timeouts. What am I doing wrong?

<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;
}
+1
source share
4 answers

toggleClass does not animate style attributes in which you should use the jQuery animation method.

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

toggleClass has nothing to do with "slow" parameters - this is true for methods using animation.

Check out the docs .

0
source

toggleClass . , , jQuery UI switchClass.

0

You can use addClass () or switchClass () which is part of unf jquery UI:

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

More articles:


All Articles