jQuery slideDown&然后在计时器上滑动 [英] jQuery slideDown & then slideUp on timer

问题描述

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

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

当用户点击< a> 在 .allTabs ， .allTabs 执行 .slideUp 。

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

What I want to do, is if a user has not clicked anything in .allTabs and the mouse is no longer within .allTabs, then a timer initiates to wait x amount of time and then do the .slideUp. Additionally, if the mouse enters .allTabs again before the .slideUp triggers - then the timer is stopped and resets when the mouse is moved outside of .allTabs

不确定如何接近。任何帮助将不胜感激。

Not sure how to approach. Any help would be appreciated.

基本标记：

<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>

推荐答案

尝试这种方式：

$(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);
    });
});

这篇关于jQuery slideDown&然后在计时器上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！