jQuery hover, how to activate fade animation once, with hover activated via 2 overlaid images

Question

so I'm trying to use the hoverIntent jQuery plugin to fix a problem I'm running into with overlaid images using the same hover fadeToggle animation.

Currently I have an image of an iPhone and a chat bubble over it. Now both the iPhone and the Chat bubble click off to the itunes app store. Also when you hover over both the phone and the bubble, the bubble animates.

My issue happens when you rollover the area where the bubble and the phone are overlaid, also if you hover over the bubble and keep moving the mouse over to the phone area. Basically the bubble animation happens twice, this is not the intent. Intent is the chat bubble animation should only happen once.

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

I believe that hoverIntent will fix my problem, as it waits till the user's mouse stops moving before activating the animation.

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

My current 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}

---

Update working code

    $('.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

The error is due to the fact that you're using the id #whoatnet-to-itunes for two elements:

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

This isn't valid and means that you're attaching a click and hover event to both the iPhone and the bubble. Remove the ids from both of them change the selector from:

$('.home-content #whoatnet-to-itunes') to $('.home-content .iphone').

The hoverIntent code would then look like this:

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