0

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

在此处输入图像描述

我希望它像这样运行： 1. 如果它是打开的，那么#red 上的单击事件将关闭 #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：将 'hover' 更改为 'mouseenter' 修复了它。

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

如果有人可以在这里帮助我，我将不胜感激。谢谢 ！

4

0 回答 0