0

親要素の後ろからコンテンツをスライドさせる単純なアニメーションがあります。問題は、その親の幅をどこで説明するかわからないことです。ステートメントのelse部分に入れようとしましたが、アニメーションが1回しか実行されない場合、アニメーションが終了したときに子が親の後ろに隠れないようにするにはどうすればよいですか?

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

Jクエリ

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

2 に答える 2

1

比較0を使用したい値 (100 や 50 など) に変更するだけです。

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

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

于 2013-03-15T05:13:08.750 に答える
0

このフィドルを試してみてください。

私は.toggleClassクラス「close」を追加/削除するために使用しました。そして、jQuery.hasClassを使用してアニメーションを決定しました。

于 2013-03-15T08:30:26.763 に答える