CODEWITHSUNDEEP
javascriptjquerycssanimationjquery-animate
cyrusza
cyrusza

Reputation: 113

jQuery animation ends prematurely

I have a little problem with a jQuery animation.

I have the following HTML:

<div id="menu">
    <a id="menu-about" href="/">A riguardo...</a><br />
    <a id="menu-ask" href="/">Fammi una domanda</a><br />
    <a id="menu-archive" href="/">Sfoglia l'archivio</a><br />
    <a id="menu-vcard" href="/">La mia vCard</a><br />
    <a id="menu-lifestream" href="/">Il mio lifestream</a><br />
</div>

Styled as:

div#menu {
    position: fixed;
    bottom: 0;
    left: 100%;
    padding: 0;
}

div#menu a {
    display: inline-block;
    height: 20px;
    margin: 0 0 10px -42px;
    padding: 6px 0 6px 42px;
    line-height: 20px;
    font: bold 20px "Arial", Helvetica, sans-serif;
    color: #263F51;
    text-shadow: 0 -1px 0 #213441, 0 1px 1px #668EAA;
    text-align: left;
    text-transform: uppercase;
}

div#menu a:hover {
    text-decoration: none;
}

div#menu a#menu-about { background: url(../img/layout/bg-menu-about.png) no-repeat left center; }
div#menu a#menu-ask { background: url(../img/layout/bg-menu-ask.png) no-repeat left center; }
div#menu a#menu-archive { background: url(../img/layout/bg-menu-archive.png) no-repeat left center; }
div#menu a#menu-vcard { background: url(../img/layout/bg-menu-vcard.png) no-repeat left center; }
div#menu a#menu-lifestream { background: url(../img/layout/bg-menu-lifestream.png) no-repeat left center; }

The animation is the following:

$(function start_menu_effect() {
    $("div#menu a").hover(function (){
        $(this).stop().animate({'marginLeft': '-' + ($(this).width() + 52) + 'px'}, 400);
    },
    function (){
        $(this).stop().animate({'marginLeft': '-42px'}, 400);
    });
});

The problem is that the animation ends prematurely. The animate function stops before reaching the full margin. Furthermore, the animation can be completed de-hovering and re-hovering the mouse before the menu returns to the original position...

EDIT - the problem seems to be related to the width, that isn't correct. I create a fiddle to demonstrate the problem: http://jsfiddle.net/cyrusza/fJCyn/

Any hints?

Upvotes: 1

Views: 262

Answers (1)

cyrusza
cyrusza

Reputation: 113

Fond a solution.

The container div, when placed outside of the document (left: 100%), doesn't expand itself as it would in a normal placement, because it hasn't the rightmost margin as reference. Therefore is necessary to set a fixed width to let the inner elements expand normally and get a correct width. Obviously the div width must be bigger than the inner elements, then we need to use an adequate value.

This is the working fiddle with a div width of 500px: http://jsfiddle.net/cyrusza/fJCyn/2/

Upvotes: 1

Related Questions