Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript 2 images activate the same animation, how would you ensure that the animation happens only once?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #45312
    leongaban
    Member

    I found a simple fadeToggle script on stackoverflow and also this simple nice tutorial post on CSS-tricks below:
    https://css-tricks.com/snippets/jquery/fade-image-into-another-image/

    They both work fine when I just have 1 image, however my problem is that I have an image of an iPhone, and on top of that image I have a chat bubble. Now the animation that happens is that the chat bubble ‘fades’ into another chat bubble with it’s colors inversed.

    The problem arises when you rollover the chat bubble and move the mouse over part of the phone, now the animate gets triggered twice :(

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

    I’m trying the hoverIntent.js plugin now, but still getting the same problem.

    #137750
    leongaban
    Member

    Sorry this should have been posted in the Javascript forum :*( could a mod move it please?

    Edit button for the win! Woot CSS-tricks!

    #137751
    leongaban
    Member

    Found the answer!
    http://stackoverflow.com/questions/16943491/jquery-hover-how-to-activate-fade-animation-once-with-hover-activated-via-2-ov

    Updated 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}

    Also now that I’m looking at this again, I think I could just create an invisible div over BOTH graphics and just put the hover / animation code on that. Eliminating the need for another plugin.

    #137752
    Smitty
    Member

    You could set a variable with either true or false as it’s value, and check that before you animate.

    rough example

    var hovered = false;

    if ( !hovered){

    $(‘#hoverElement’).mouseOver(function(){
    hovered = true;
    });
    $(‘#hoverElement’).mouseOut(function(){
    hovered = false;
    });
    }

    #137753
    leongaban
    Member

    Oh sweet man thanks! Super simple :)

    #137757
    Smitty
    Member

    Glad to hep!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.