I'm trying to use jquery to swap between and image to html text/links then back again, seems simple enough but i get problems when I add a fade transition. How it's meant to work: on load jquery hides div with text and links thus only showing the image, then when the user rolls over the image it fades out and fades in the text/links behind it so it looks like a swap. On mouseout the reverse happens leaving the image visible at the end just how it started.

HTML:

<div class="image pb">
    <img src="images/1a.png" width="230" height="32" alt="Image 1" />
    <div class="text pb">
        <a href="http://www.example.com" id="pb">Link Number 1</a>
    </div>  
</div>
<div class="image sc">
    <img src="images/2b.png" width="230" height="36" alt="Image 2" />
    <div class="text sc">
        <a href="http://www.example.com">Link Number 2</a>
        <a href="http://www.example.com">Link Number 3</a>
    </div>  
</div>

CSS:

    .image {
        margin-right: auto;
        margin-left: auto;
        width: 230px;
        margin-top: 10px;
        margin-bottom: 10px;
        display: table;
    }
    .text {
        font-size: 85%;
        line-height: 1.5em;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
    }
    .text a {
        display: block;
    }
    .pb {
    height: 32px;
    }
    .sc {
    height: 36px;
    }

jQuery:

$(document).ready(function(){
     // hide text on load
     $("div.image .text").hide();

    $("div.image").mouseenter(function(e){ // on rollover
        $(this).find("img").stop().animate( { opacity: "hide" }, 75, 
            function(){ // when animation complete
                $(this).parent().find("div.text").stop().animate( { opacity: "show" }, 75);
            });

    }); 

    $("div.image").mouseleave(function(e){ // on rollout
        $(this).find("div.text").stop().animate( { opacity: "hide" }, 75,
            function(){ // when animation complete
                $(this).parent().find("img").stop().animate( { opacity: "show" }, 75);
            });

    });

}); // end ready function

This code works if you roll on/off slowly, however when you start doing it fast I get semi-transparent text and images (I'm guessing due to the transitions not finishing). I've tried to fix that by taking out the .stop() but then i get an error where both image and text can be visible at same time if rolled over quickly. I've also tried using the hoverFlow plugin to see if it was a queuing problem but still doesn't work as intended.

The only time it kind of works is if I set the time to 0 instead of 75 and don't use a fade, but I want a fade!

I'm running out of ideas. Is my approach wrong? Any help much appreciated, thanks.

2 answers

Mottie 1134
1
point

Have you tried using .stop(true, true)?

Doing that clears the que and allows the animation to finish: .stop( [ clearQueue ], [ jumpToEnd ] ) from the docs.

Answered over 8 years ago by Mottie
ritch0s 46
0
points

I was playing around with the timings and using Fudgey's suggestion and I have seemed to have found a solution. The problem it seems is that if a user was to roll over the image and roll out before the 75 milliseconds of animation was complete then the second part of the animation doesn't run. Using the .stop(true, true) to skip as suggested and changing the timings of the animations it seems to work.

This is what i have:

$("div.image").mouseenter(function(e){ // on rollover
        $(this).find("img").stop(true, true).animate( { opacity: "hide" }, 0, 
            function(){ // when animation complete
                $(this).parent().find("div.text").stop(true, true).animate( { opacity: "show" }, 150);
            });

    }); 

    $("div.image").mouseleave(function(e){ // on rollout
        $(this).find("div.text").stop(true, true).animate( { opacity: "hide" }, 0,
            function(){ // when animation complete
                $(this).parent().find("img").stop(true, true).animate( { opacity: "show" }, 150);
            });
Answered over 8 years ago by ritch0s