jQuery懸停，如何激活淡出動畫一次，懸停通過2疊加圖像激活

Question

所以我想用hoverIntent jQuery插件來解決我遇到的問題，使用相同的懸停fadeToggle動畫重疊的圖像。

目前我有一個iPhone的圖像和一個聊天氣泡。現在，iPhone和聊天泡泡都會點擊iTunes應用商店。當你將鼠標懸停在電話和泡泡上時，泡泡也會動起來。

當你翻轉氣泡和手機疊加的區域時，我的問題就發生了，如果你將鼠標懸停在氣泡上，並將鼠標移到手機區域，基本上泡泡動畫發生兩次，這不是意圖。意圖是聊天泡泡動畫應該只發生一次。

Test link:http://leongaban.com/_projects/whoat/_HTML/fade.html

我相信hoverIntent將解決我的問題，因爲它等待直到用戶的鼠標停止啓動動畫前移動。

hoverIntent.js：http://cherne.net/brian/resources/jquery.hoverIntent.html

我目前的jQuery

// My Original Try Me chat bubble animation 
    $('.home-content #whoatnet-to-itunes').click(function() { 
     window.location = home.itunesLink + this.id; 
    }).hover(function(){ 
     $('.home-content .tryme').find("img:last").fadeToggle(); 
    }); 

    // My hoverIntent Test - seems to have made it worst :(
    // See test link above 
    $('.home-content #whoatnet-to-itunes').click(function() { 
     window.location = home.itunesLink + this.id; 
    }).hoverIntent(toggleFade); 

    function toggleFade(){$(this).find("img:last").fadeToggle().stop} 

---

更新工作代碼

$('.home-content .iphone').click(function() { 
     window.location = home.itunesLink + this.id; 
    }).hoverIntent(phoneToggleFade); 

    $('.home-content .tryme').click(function() { 
     window.location = home.itunesLink + this.id; 
    }).hoverIntent(tryToggleFade); 

    function phoneToggleFade(){$('.home-content .tryme').find("img:last").fadeToggle().stop} 
    function tryToggleFade(){$(this).find("img:last").fadeToggle().stop} 

Answer 1

的錯誤是由於您使用的ID #whoatnet-to-itunes對於兩個元素：

<div class="tryme" id="whoatnet-to-itunes">...</div> 
<div class="iphone" id="whoatnet-to-itunes"></div> 

這是無效的，意味着您將一個點擊和懸停事件附加到iPhone和泡泡。從他們兩個刪除ID改變選擇器從：

$('.home-content #whoatnet-to-itunes')到$('.home-content .iphone')。然後

的hoverIntent代碼應該是這樣的：

$('.home-content .iphone').click(function() { 
    window.location = home.itunesLink + this.id; 
}).hoverIntent(toggleFade);