javascript中的動畫功能，當我單擊它時需要對某物進行動畫處理，以便一個div進入1種方式，另一個div進入另一種方式

Question

我正在使用的代碼如下所示

<script>
        (function($){
            $(document).on('click', '.tile', function(){
                $(this).addClass('active');
                $('.tile:not(.active):eq(0)').animate({top: -900, left: 180});
                $('.tile:not(.active):eq(1)').animate({top: 900, left: -180});
            });
            $(document).on('click', '.active', function(){
                $('.tile:not(.active):eq(0)').animate({top: 0, left: 0});
                $('.tile:not(.active):eq(1)').animate({top: 0, left: 0});
                $(this).removeClass('active');
            });
        })(jQuery);
    </script>

我不知道如何修改此代碼以適合我的html。 我當前的html是這樣的：

<div class="container" id= "left" >
        <h1 style="color:white"><a>HAIR</a></h1>
    </div>

    <div class= "container" id= "center">
        <h1 style="color:white"><a>BEAUTY<a/></h1>
    </div>

    <div class="container" id= "right">
        <h1 style="color:white"><a>BARBERS</a></h1>
    </div>
</div>

誰能幫忙嗎？ 非常感謝

Answer 1

這應該可以解決問題。

<script>
        (function($){
            $(document).on('click', '.container', function(){
                $(this).addClass('active');
                $('.container:not(.active):eq(0)').animate({top: -900, left: 180});
                $('.container:not(.active):eq(1)').animate({top: 900, left: -180});
            });
            $(document).on('click', '.active', function(){
                $('.container:not(.active):eq(0)').animate({top: 0, left: 0});
                $('.container:not(.active):eq(1)').animate({top: 0, left: 0});
                $(this).removeClass('active');
            });
        })(jQuery);
    </script>