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

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

我希望它能像这样工作： 1.如果它是打开的，则单击事件上的#红色将关闭#绿色（向左滑动），悬停事件上的#红色将不起任何作用 2.如果#绿色关闭，则将鼠标悬停在#红色将滑出#绿色

这是我的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');
         });
    }
});

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

编辑：它似乎在FF中工作正常，但在Chrome和IE中则不行

EDIT2:将“悬停”更改为“鼠标指针”修复了它。

jsFiddle代码：

---

如果有人能帮我，我将不胜感激。谢谢大家!

你到底有什么问题？如果我单击，绿色隐藏，然后当我将鼠标悬停在红色上时，绿色会回来，正如您所说的那样。您能解释一下悬停和单击红色div的行为之间的区别吗？对不起，刚刚在FF中测试了这个，它工作得很好。问题发生在Chrome上，这能更好地满足您的需求吗？（大小在CSS中是可变的）@Itay您可能添加了额外的不必要的代码，因为我将代码粘贴到了#green被命名为#toolbar的位置，现在修复了这个问题以避免更多的混淆。我看了一下你的代码，将“hover”改为“mouseenter”成功了。非常感谢。