CODEWITHSUNDEEP
javascriptjquery-animatejquery
Dan
Dan

Reputation: 57

Two bugs with a jquery toggle width animation

So I'm currently working on a website wich uses an animated logo I made with JQUERY 1.10.2

How it works: I have an Acronym "AD" and as soon as the mouse is over one of the letters, the full name slides out from the right of each letter.

It goes like so AD -> A...D... -> AcusticDream.

If you do not understand here is a LIVE DEMO on my site http://acusticdream.tk/TEST/

My code is :

<script type="text/javascript">
    $(function () {
        $(".logo-firstletter").hover(function () {
            $(".logo-full").animate({width: 'toggle'}, 500);
        });
    });
</script>

Feel free to also look at my page's source code to see.

The .logo-firstletter class is self explanatory and the .logo-full is the other letters.

Bug #1 So the BUG is, the animation works pefectly, but if you put your mouse in the right(not over the first letter anymore) it will just animate endlessly... Try it by yourself to see..

Bug #2 If you just move your mouse repeatedly over the letters of the logo, it seems jquery will memorize how many times you put the mouse over so it will continue to animate and animate until the "count" is over.

Any help is appreciated and if theres a better way to do this I would welcome it too!

Thanks in advance!

Upvotes: 0

Views: 129

Answers (1)

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

Maybe with this:

$(".logo-firstletter").hover(function () {
     if($(".logo-full").is(":animated")) return;   //Add this
     $(".logo-full").animate({width: 'toggle'}, 500);
});

This way, we only animate if there is no current animation.

Edit: Add a new wrapper element logo-container to your html, like this:

    <div id="logo-container">
        <div  class="logo-firstletter">A</div>
        <div class="logo-full">custic</div>
        <div  class="logo-firstletter">D</div>
        <div class="logo-full">ream</div>
    </div>

Then do:

$("#logo-container").hover(function () {
    $(".logo-full").animate({width: 'show'}, 500);
},function () {
    $(".logo-full").animate({width: 'hide'}, 500);
});

Hope this helps. Cheers

Upvotes: 1

Related Questions