CODEWITHSUNDEEP
jqueryjquery-uitoggleclass
klicks
klicks

Reputation: 71

jQuery UI toggleClass duration behaving strangely

I'm using jQuery UI .toggleClass(class, [duration]) to toggle a red background on a 100x100 box, but the results I'm getting are strange. See http://jqueryui.com/docs/toggleClass/ for reference.

As you can see from this example - http://jsfiddle.net/xkrX9/ - the first click on div#box toggles the red background immediately (without any [duration]) and then toggles it again back to white after approx 1s without a second click event. The second click (without reloading the page) results in the .red class being toggled as expected with the 1000ms duration.

What's going wrong here? Thanks for any insight!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<style>
    #box { width: 100px; height: 100px; border: 1px solid #999; }
    .red { background: red; }
</style>

<div id="box"></div>

<script>
    $('#box').click(function() {
        $(this).toggleClass('red', 1000);
    });
</script>

Upvotes: 4

Views: 1178

Answers (1)

Andrew
Andrew

Reputation: 13853

It would seem that it is a bug. If there is no class attribute it will not work, but once you add the class attibute to the node it works fine,

http://jsfiddle.net/xkrX9/3/

I would file a bug report.

jQUery UI Bug #8113

Upvotes: 2

Related Questions