Question

I’m using jQuery UI .toggleClass(class, [duration]) to toggle a red background on a 100×100 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>

Answer 1

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