jquery .hover（）与else if语句

我想在下拉菜单中为一组子项目放置onmouseout事件的一些延迟。但我不想使用css转换。我用.hover（）和setTimeout方法设置它，但我只想把它放在菜单中的特定元素 - 在这种情况下仅用于子项目，所以我使用if else else语句。我不知道为什么这个if else声明不起作用。jquery .hover（）与else if语句

这里是我的javascript代码：

var selectors = 
    { 
     element: '.main-menu li:has(ul)' 
    } 

var opacityWorkaround = function ($element, value) { 

     $element.css('opacity', value); 
}; 

var getAnimationValues = function (visible) { 
    var result = { 
     visibility: visible 
    }; 
     result.opacity = visible === 'visible' ? 1 : 0; 
}; 

var mouseActionHandler = function ($element, visible, opacityValue) { 
    $element 
     .stop() 
     .css("visibility", 'visible') 
     .animate(getAnimationValues(visible), 
     3000, 
     function() { 
       $(this).css("visibility", visible); 
       opacityWorkaround($(this), opacityValue); 
       }); 
}; 

var onMouseIn = function() { 
    var $submenu = $(this).children("ul:first"); 
    if ($submenu) { 
     mouseActionHandler($submenu, 'visible', 1); 
    } 
}; 

var onMouseOut = function() { 

    var $submenu = $(this).children("ul:first"); 
    var $global = $('.global').children('ul'); 

    if ($submenu) { 

       mouseActionHandler($submenu, 'hidden', 0); 

    } else if ($global) { 
     setTimeout(function() { 
      mouseActionHandler($global, 'hidden', 0); 
     },1500); 
    } 
}; 

$(selectors.element).hover(onMouseIn, onMouseOut);

我把1500毫秒的延迟和$全局变量是指在菜单子项，我想使disapear与延迟。我想在用户将鼠标光标移出“某些项目>”选项卡时实现此目的。

这是我的小提琴示例。 http://jsfiddle.net/PNz9F/1/

在此先感谢您的帮助！

来源

2013-12-15 kris

我想我更接近得到解决方案，以便我在这里再举一个例子 http://jsfiddle.net/8beT8/13/ – kris

这是你要找的吗？ http://jsfiddle.net/PNz9F/6/ – Trevor

是Trevor，这是我正在寻找的东西，你节省了几个小时的挖掘。非常感谢！我必须审查条件statc的基础.. – kris

在您的问题$submenu中的示例中始终有一个值，因此else if语句永远不会运行。您可以改为查看课程。

 var timeout; 
     var $submenu = $(this).children("ul:first"); 
     var $global = $('.global').children('ul'); 

     if ($(this).hasClass('menu-item')) { 

        mouseActionHandler($submenu, 'hidden', 0); 
        mouseActionHandler($global, 'hidden', 0); 
        clearTimeout(timeout); 

     } else if ($(this).hasClass('global')) { 
      timeout = setTimeout(function() { 
       mouseActionHandler($global, 'hidden', 0); 
      },1500); 
     }

来源

2013-12-15 21:24:59 Trevor

你应该能够只使用:hover选择在你的代码来检查用户是否悬停在元素与否，并相应地运行代码

来源

2013-12-15 21:28:12 xorinzor

是的，我使用：悬停选择器为所有其他浏览器，并使延迟我使用过渡延迟属性，但这不适用于比版本10以前的IE – kris

不，但我的意思是在您的JQuery选择器中，您可以使用任何CSS选择器包括：悬停以查看用户是否悬停在元素上，然后使用if（$（“＃something：hover”）。length> 0）{// something} else {// something else} – xorinzor

and你也可以使用$（“＃something”）。stop（true，true）.hover（function（）{// do something}，function（）{// do something else}）; – xorinzor

jquery .hover（）与else if语句

回答

相关问题