アニメーションの同時実行

今回も備忘録的な内容です。
当blog でも animate の同時実行は何度か利用しているのかとも思います。
ただ、今回は同時実行をする際に、終了の時間を変更して欲しいとのことでした。
とりあえずやってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                $('#exeMove1').click( function(){
                    $('#target_div').stop().css({top: 0, left: 0})
                    .animate(
                        {
                            top      : 300 + 'px',
                            left     : 300 + 'px'
                        },
                        3000,
                        'linear'
                    )
                });
                
                $('#exeMove2').click( function(){
                    $('#target_div').stop().css({top: 0, left: 0})
                    .animate(
                        {
                            top      : 300 + 'px'
                        },
                        {
                            duration : 3000,
                            easing   : 'linear',
                            queue    : false
                        }
                    )
                    .animate(
                        {
                            left     : 300 + 'px'
                        },
                        {
                            duration : 1500,
                            easing   : 'linear',
                            complete : function(){ $('#target_div').animate({left : 0 + 'px'}, {duration: 1500, easing: 'linear'}) },
                            queue    : false
                        }
                    );
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

            div#disp_area {
                position         : relative;
            }

            div#target_div {
                position         : absolute;
                width            : 50px;
                height           : 50px;
                background-color : #ffff00;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="exeMove1">click me! 1</button>
                <button id="exeMove2">click me! 2</button>
            </div>

            <div id="disp_area">
                <div id="target_div"></div>
            </div>

        </div>
    </body>
</html>

sample

sample 「click me! 1」を click すると黄色の div が右下に移動します。
まぁ、上に動く動きと、右に動く動作を同時に行っている形ですね。
但し、この場合それぞれの動きに対して時間を設定することができません。

sample 「click me! 2」を click すると黄色の div が右下に移動し、
その後、左下に移動します。
今回は下に動きの半分の時間で右へ行く動作を指定し、残りの時間で
左に移動させています。

上下の動きと左右の動きで実行時間を変えることができました。
この方法だと同時に違う object に動きをつけることも出来ます。

取り急ぎ今までは一つの object を動かすことが多かったため
余り気にしていなかったのですが、今後は色々な動作をさせる
ことが出来ますね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です