CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animate
Derp
Derp

Reputation: 929

Left Animation Account for Parent Width

I have a simple animation I'm playing with where it slides content from behind the parent element. The problem is I'm not sure where to account for that parents width. I tried to put it in the else part of the statement but if I do then the animation only runs once, where do I make it so when the animation is finished the child isn't hiding behind the parent?

JSFiddle

HTML

<div id="slideContainer">
    <a href="#">Start Slide</a>
    <div id="slide">
        This is More Content!
    </div>
</div>

CSS

#slideContainer{
    position: relative;
    width: 500px;
    overflow:hidden;
}
#slideContainer a{
    display:block;
    background-color: beige;
    width:50px;
    height: 50px;
    float: left;
    position: relative;
    z-index: 1;
}
#slide{
    width: 200px;
    height: 50px;
    background-color: beige;
    position: absolute;
    left: -500px;
}

Jquery

$(document).ready(function(){
    $('#slideContainer a').click(function() {
        var lefty = $(this).next();
        lefty.animate({
          left: parseInt(lefty.css('left'),10) == 0 ?
            -lefty.width() :
            100
        });
    });
});

Upvotes: 0

Views: 82

Answers (2)

Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

Try this fiddle.

I have used .toggleClass to add/remove class "close". And used jQuery's .hasClass to decide the animation.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191809

Just change the comparisons from 0 to whatever value you want to use (such as 100 or 50).

left: parseInt(lefty.css('left'),10) == 50 ?
-lefty.width() :
50

http://jsfiddle.net/ExplosionPIlls/NwJTU/2/

Upvotes: 1

Related Questions