CODEWITHSUNDEEP
javascriptjqueryhtmlcss
xwrs
xwrs

Reputation: 1297

jQuery duration for toggleClass issue

I'm trying to change style class of div element during 1 second with some effect. This is my code. When I execute this example style switches immediately without effects and timeouts. What I'm 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;
}

Upvotes: 1

Views: 5282

Answers (4)

ShankarSangoli
ShankarSangoli

Reputation: 69915

toggleClass do not animate the style attributes you have to use animate method of JQuery.

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

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could use addClass() or switchClass() which is part odf jquery UI:

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

Upvotes: 0

Ewout Kleinsmann
Ewout Kleinsmann

Reputation: 1297

The toggleClass function doesn't work that way. The behaviour you're looking for is accomplished with the jQuery UI switchClass function.

Upvotes: 0

shabunc
shabunc

Reputation: 24741

toggleClass has nothing to do with "slow"-like params - this is valid for for methods, using animations.

Check the docs.

Upvotes: 0

Related Questions