javascript - 父宽度的左动画帐户

Question

我正在玩一个简单的动画，它从父元素后面滑动内容。问题是我不确定在哪里解释父母的宽度。我试图把它放在语句的 else 部分，但如果我这样做了，那么动画只运行一次，我在哪里制作它，所以当动画完成时，孩子不会躲在父母身后？

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
        });
    });
});

Answer 1

只需将比较值更改为0您想要使用的任何值（例如 100 或 50）。

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

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

Answer 2

试试这个小提琴。

我曾经.toggleClass添加/删除类“关闭”。并使用jQuery.hasClass来决定动画。