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

错误是由于您使用了#whoatnet-to-itunes个ID来表示两个元素：

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