將hoverintent添加到此jquery片段

是否有方法將hoverinter添加到此jquery片段？目前，如果您將鼠標懸停在「牆塊內容」類的周圍元素上，它們都會淡入/淡出。將hoverintent添加到此jquery片段

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

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

來源

2013-01-22 Dean Elliott

你能舉一個例子，說明「wall-block-content class的周圍元素」嗎？也許包括一個簡單的js發生了什麼 – Ian

使用animate()方法來代替，更紮實，你可以提高你的動畫是這樣的：

更新：您可以創建一個假的元素與透明BG，比使用觸發目標元素的動畫。 Here is jsFiddle sample.

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

來源

2013-01-22 19:39:26

爲什麼它更穩固？ – Ian

這太棒了，但有沒有辦法隱藏.wall-block-content div，直到有人懸停在它上面？ –

@DeanElliott我已經更新了我的回答，請查看jsFiddle。 –

使用定時器實現意圖：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毫秒），以顯示意圖。巴拉斯是正確的，使用動畫更清潔。

來源

2013-01-22 19:50:16 Grinn

將hoverintent添加到此jquery片段

回答

相關問題