jQuery UI toggleClass持续时间表现奇怪

我正在使用jQuery UI .toggleClass(类,[duration])来切换100×100盒子上的红色背景,但我得到的结果很奇怪.请参阅 http://jqueryui.com/docs/toggleClass/以供参考.

正如您在此示例中所看到的 – http://jsfiddle.net/xkrX9/ – 第一次点击div#框立即切换红色背景(没有任何[持续时间]),然后在没有第二次点击事件的情况下在大约1秒后再次切换回白色.第二次单击(不重新加载页面)导致.red类按预期切换,持续时间为1000ms.

这里出了什么问题？感谢您的任何见解！

<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>