所以我正在尝试使用hoverIntent jQuery插件修复我使用相同悬停fadeToggle动画覆盖图像时遇到的问题。
目前我有一张iPhone的图片和一个聊天气泡。现在,iPhone和聊天气泡都会点击itunes应用商店。此外,当您将鼠标悬停在手机和气泡上时,气泡会动画。
当您翻转气泡和手机覆盖的区域时,如果您将鼠标悬停在气泡上并继续将鼠标移动到手机区域,我的问题就会发生。基本上泡泡动画发生两次,这不是意图。意图是聊天气泡动画应该只发生一次。
我相信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}
答案 0 :(得分: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);