3

シンプルなスライドアップアニメーションです。問題は、myDiv クラスの "top" パラメータを変更すると、アニメーションが正しく動作せず、上にスライドするのではなく、上から下にスライドすることです。ボタンを初めてクリックしたときにのみ、正しく機能しません。myDiv の top パラメータをより大きな数値に変更すると、問題はなくなります。コードの何が問題なのかを見つけるのを手伝ってくれませんか。

   <style>
    .box {
        position:relative;
        width: 200px;
        height: 500px;
    }
    .myDiv {
        position: absolute;
        width:100%;
        overflow: hidden;
        bottom:0px;
        top:10px;
        left:500;
    }
</style>
<script>
    var swt = 0;
    $(document).ready(function () {
        $(".b1").click(function () {

            var div = $(".myDiv");
            if (swt == 0) {
                div.animate({
                    top: '300px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'300px', opacity:'1'},"slow");
                swt++;
            } else {
                div.animate({
                    top: '500px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'0px', opacity:'1'},"slow");
                swt--;
            }
        });
    });
</script>
</head>
<body>
    <button class="b1">Start Animation</button>
    <p>posds</p>
    <div class="box">
        <div class="myDiv" style="background:#7549B1; width:200px;"></div>
    </div>
</body>

</html>
4

3 に答える 3

3

どのような効果が必要なのかよくわかりませんが、次のbottom代わりに値を変更している可能性がありtopます。

if(swt==0){
    div.animate({bottom:'500px', opacity:'1'}, "slow");
    swt++;  
} else {
    div.animate({bottom:'300px', opacity:'1'}, "slow");
    swt--;
}

http://jsbin.com/ixigaf/1/edit

于 2013-01-25T13:10:39.583 に答える
1

bottom同じ要素でandを使用しないでくださいtop。競合が発生します。負の値で高さとアニメート トップを定義します。

ここにjsFiddleがあります。

if(swt==0){
       div.animate({top:'-300px', opacity:'1'}, "slow");
        swt++;  
}else{
      div.animate({top:'-500px', opacity:'1'}, "slow");
        swt--;
}
于 2013-01-25T13:12:02.153 に答える
0

http://jsfiddle.net/Cyber​​ek/yLBeK/

これは私が理解しているバグですが、CSS のトップを 10px から 100px (js のトップと同じ) に変更すると、すべて問題ありません。

.myDiv {
        position: absolute;
        width:100px;
        height: 100px;
        overflow: hidden;
        top:100px;
        left:100px;
        background: red;
}

$(".b1").click(function () {

            var div = $(".myDiv");
            if (swt == 0) {
                div.animate({
                    top: '100px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'300px', opacity:'1'},"slow");
                swt++;
            } else {
                div.animate({
                    top: '200px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'0px', opacity:'1'},"slow");
                swt--;
            }
        });
于 2013-01-25T13:18:27.707 に答える