jQuery（Chrome和IE）中奇怪的侧滑动行为

Question

我正在尝试在我的网站上创建一个类似于win8魅力栏的滑动条。看起来有点像这样：

我希望它的功能如下： 1.如果它打开，那么#red上的click事件将关闭#green（向左滑动），#red上的悬停事件将不执行任何操作 2.如果#green已关闭，则悬停在#red上会将#green滑出。

这是我的jQuery代码

$("#red").click(function(event) {
    $("#green").removeClass('ready');

    if ($("#green").hasClass('visible')) {
        var width = $("#green").width();
        $("#green").animate({"left":"-"+width+"px"}, "fast");

        $("#green").promise().done(function() {      
            $("#green").removeClass('visible');
            $("#green").addClass('ready');
        });
    } 

});

$("#red").hover(function(event) {
    if ( !($("#green").hasClass('visible')) && $("#green").hasClass('ready') )
    {
         $("#green").animate({"left":"0px"}, "fast");

         $("#green").promise().done(function() {
            $("#green").addClass('visible');
         });
    }
});

我认为点击#red事件脚本后没有更新#red上的位置（它仍然认为它在同一个地方犯了罪），当我点击后移动鼠标时，悬停事件触发器。添加类.ready和.visible似乎可以正常工作，因为如果我在滑动完成之前移动鼠标，则不会触发悬停。

编辑：它似乎在FF中正常工作，但在Chrome和IE中却没有。

EDIT2：将“悬停”更改为“mouseenter”修复它。

jsFiddle代码： http://jsfiddle.net/grhfT/2/

如果有人能帮助我，我将不胜感激。谢谢！