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>
