1

私は簡単な.slideDown機能を持っています：

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

ユーザーがでをクリックすると、<a>を.allTabs実行.allTabsします.slideUp。

私がやりたいのは、ユーザーが何もクリックしておらず.allTabs、マウスがの範囲内.allTabsにない場合、タイマーがx時間待機してから、を実行すること.slideUpです。さらに、トリガー.allTabsの前にマウスが再び入る.slideUpと、タイマーが停止し、マウスが外側に移動するとリセットされます.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>
4

3 に答える 3

4

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

フィドル

アップデート：

var timeout;

$(document).delegate(".allTabs", "mouseenter", function() {
    clearTimeout(timeout)
})

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

フィドル

于 2012-08-25T01:12:20.300 に答える
1

のおよびのslideupコールバックでを実行するようにタイマーを設定します。でタイマーをキャンセルします。slidedownmouseout.allTabsmouseover.allTabs

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

</ p>

于 2012-08-25T01:03:35.770 に答える
0

この方法を試してください：

$(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);
    });
});
于 2012-08-25T01:12:32.747 に答える