Animate function in javascript, I need to animate something when I click on it so that one div goes 1 way and the other div goes the other way

Question

The code I am working with looks like this

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

I cannot work out how I can adapt this code to fit my html. My current html is this:

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

Can anyone please help? Many thanks

Answer 1

this should do the trick.

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