0

所以我正在尝试使用 hoverIntent jQuery 插件来解决我在使用相同的悬停fadeToggle 动画时遇到的覆盖图像的问题。

目前我有一张 iPhone 的图片，上面有一个聊天气泡。现在，iPhone 和聊天气泡都点击进入 iTunes 应用商店。此外，当您将鼠标悬停在手机和气泡上时，气泡也会动画。

当您将鼠标悬停在气泡和手机重叠的区域时，我的问题就会发生，如果您将鼠标悬停在气泡上并继续将鼠标移到手机区域。基本上气泡动画会发生两次，这不是本意。意图是聊天气泡动画应该只发生一次。

测试链接： 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}
4

1 回答 1

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);
于 2013-06-05T15:19:50.010 回答