jQuery幻灯片Down&然后在计时器上向上滑动

jQuery slideDown & then slideUp on timer

本文关键字：计时器 然后 Down 幻灯片 amp jQuery      更新时间：2023-09-26

我有一个简单的.slideDown函数：

$globalTabs.find('.seeMore a').live("click", function(){
     $globalTabs.find(".allTabs").slideDown('slow');
 });

当用户单击.allTabs中的<a>时，.allTabs执行.slideUp。

我想做的是，如果用户没有点击.allTabs中的任何内容，并且鼠标不再位于.allTabs中，则计时器启动等待x时间，然后执行.slideUp。此外，如果鼠标在.slideUp触发之前再次进入.allTabs，则当鼠标移出.allTabs 时，计时器将停止并重置

不知道如何接近。如有任何帮助，我们将不胜感激。

基本标记：

<div class="allTabs">
   <a href="#">link 1</a>
   <a href="#">link 2</a>
   <a href="#">link 3</a>
   <a href="#">link 4</a>
</div>

和：

<li class="seeMore"><a href="#">see more</a></li>

您可以使用setTimeout和clearTimeout函数，请注意，live方法已被弃用，您可以改用on方法。

var timeout;
$(document).on({
    mouseenter: function(){
        clearTimeout(timeout)
    },
    mouseleave: function(){
        var $this = $(this)    
        timeout = setTimeout(function(){
           $this.slideUp('slow')         
        }, 500)
    },
}, ".allTabs")

Fiddle

更新：

var timeout;
$(document).delegate(".allTabs", "mouseenter", function() {
    clearTimeout(timeout)
})
$(document).delegate(".allTabs", "mouseleave", function() {
    var $this = $(this)
    timeout = setTimeout(function() {
        $this.slideUp('slow')
    }, 1000)
})

Fiddle

在slidedown的回调和.allTabs的mouseout上设置一个计时器来执行slideup。取消.allTabs上mouseover上的计时器。

var $timer;
function hideAllTabs() {
    $globalTabs.find(".allTabs").slideUp('slow');
}
$globalTabs.find('.seeMore a').live("click", function(){
    $globalTabs.find(".allTabs").slideDown('slow', function() {
        $timer = setTimeout(hideAllTabs, 1000);
    });
});
$globalTabs.find(".allTabs").live("mouseout",function() {
    $timer = setTimeout(hideAllTabs, 1000);
});
$globalTabs.find(".allTabs").live("mouseover",function() {
    clearTimeout($timer);
});

​

试试这个方法：

$(function() {
    var $allTabs = $globalTabs.find(".allTabs");
    var timer;
    $globalTabs.find('.seeMore a').live("click", function(){
        $allTabs.slideDown('slow');
    });
    $allTabs.mouseout(function(){
        timer = setTimeout(function() {$allTabs.slideUp()}, 3000);
    });
    $allTabs.mouseover(function() {
        clearTimeout(timer);
    });
});
相关文章：