將hoverintent添加到此jquery片段

Question

有沒有辦法將hoverinter添加到此jquery片段中？ 當前，如果您使用“ wall-block-content”類將鼠標懸停在周圍的元素上，它們都會淡入/淡出。

$(".wall-block-content").fadeTo("fast", 0);

$(".wall-block-content").hover(function(){
$(this).fadeTo("fast", 1);
},function(){
$(this).fadeTo("fast", 0);
});

Answer 1

請改用animate（）方法，使其更加牢固，您可以像這樣改善動畫效果：

更新：您可以創建一個帶有透明bg的假元素，然后將其用於觸發目標元素的動畫。 這是jsFiddle示例。

$(".hidden").hover(function(){
    $('.target').stop().animate({'opacity':'1','margin-top':'0px'},100);
},function(){
    $('.target').stop().animate({'opacity':'0','margin-top':'20px'},100);
});

<div id="wrapper">
    <div class="target posi"></div>
    <div class="hidden posi"></div>
</div>

#wrapper { position:relative; left:0; top:0; } 
    .posi { position:absolute; left:100px; top:100px; width:200px; height:200px;}
        .hidden { background:transparent; cursor:pointer; }
        .target {background:red; opacity:0;}

Answer 2

使用計時器實現意圖： http : //jsfiddle.net/bxqTr/

$(".wall-block-content").hover(function(){
    var $this = $(this),
        timer = $this.data("timer");

    if(timer) window.clearTimeout(timer);
    timer = window.setTimeout(function () {
        $this.stop().animate({'opacity':'0'},100);
    }, 1000);
    $this.data("timer", timer);
},function(){
    var $this = $(this),
        timer = $this.data("timer");

    if(timer) window.clearTimeout(timer);
     $this.stop().animate({'opacity':'1'},100);
});

在此示例中，用戶必須將鼠標懸停在元素上至少1秒（1000毫秒）以顯示意圖。 Barlas是正確的，但是使用動畫效果更干凈。