2

別のdivをクリックすると、DIVレイヤーのアニメーションが有効になります。同時に、アニメーション化する予定のDIVレイヤーがまだアニメーション化されていない場合にのみ、アニメーション化を有効にする条件ステートメントが必要です。

divの高さをアニメートするため、高さの値を確認することを考えていました。たとえば、高さが400pxの場合、アニメーションを許可するためにdivレイヤーの高さをどのように正しくチェックするのか疑問に思っています。

また、サンプルのアニメーションを制御するためのより良い方法を開きます。JSTweenライブラリを使用しています。以下はコードです。どんなアドバイスも大歓迎です！ありがとうございました。

<script type="text/javascript">
        window.onload = function() {
            $("#plus").click(function() {
                $("#chromebottom").tween({
                            height:{
                              start: 0,
                              stop: 400,
                              time: 0,
                              units: 'px',
                              duration: 1,
                              effect:'quartOut'
                           }
                        });
                        $.play();
            });
        };
    </script>

スタイル：

#chromebottom {
background-color: rgb(230, 230, 230);
border: 1px solid rgb(230, 230, 230);
height: 35px;
left: 0px;
width: 100%;
position: absolute;
bottom: 0px;
z-index:1;
background:#cccccc;
}
#plus
{
position: absolute;
left: 20px;
bottom: 50px;
width: 25px;
height: 25px;
background-color:#F00;
color: #FFF;
margin:2px;
padding:2px;
display:block;
z-index: 3;
}
enter code here
#plus:hover{
background-color:#600;
cursor: pointer;
}

体：

<body>
         <div id="plus">+</div> 
         <div id="chromebottom"></div>
    <body>
4

1 に答える 1

0

アニメーション化されたdivにフラグを付けるだけです。そのためにHTML5属性を使用しましたが、jQueryのdata（）data-*関数を使用することもできます。

javascriptコードとhtmlを次のように変更して、私のデモを見てください：

JavaScript

$("#plus").click(function() {
    cb = $("#chromebottom");
    if (cb.attr("data-animation") == "false") {
        cb.attr("data-animation", "true");
        $("#chromebottom").tween({
            height: {
                start: 0,
                stop: 400,
                time: 0,
                units: 'px',
                duration: 1,
                effect: 'quartOut',
                onStop: function() {
                    cb.attr("data-animation", "false");
                }
            }

        });
        $.play();
    }

});​

HTML

<body>
         <div id="plus">+</div> 
         <div id="chromebottom" data-animation="false"></div>
<body>​

これでうまくいきます！

アップデート

Update 1、UPDATE 2、またはUPDATE 3のようなものが必要ですか？それとも私はあなたが望むものを手に入れられないのですか？次に、それをよりよく説明してみてください:)

于 2012-05-04T22:15:03.857 に答える