JQuery UI toggleClass duration leading weird

Question

I use jQuery UI.toggleClass (class, [duration]) to switch the red background to the 100x100 field, but the results I get are weird. See http://jqueryui.com/docs/toggleClass/ for reference.

As you can see from this example - http://jsfiddle.net/xkrX9/ - first click on the div # field to switch the red background immediately (without any [duration]), and then switch back to white after about 1 s without second click event. Clicking the second (without reloading the page) causes the .red class to switch as expected with a duration of 1000 ms.

What's going on here? Thank you for understanding!

<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

This would seem to be a mistake. If the class attribute is not there, it will not work, but as soon as you add the attibute class to the node, it works fine,

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

I would post a bug report.

jQuery UI Error # 8113