Sujet : Déplacement d'une div au survol d'une autre avec effet de transition

Bonjour !

Petit problème de débutant...

J'aimerais déplacer la div "div2" 204px à droite lorsque l'on survole la div "div1". J'aimerais aussi que ce déplacement soit fluide (avec transition).

J'ai essayer un script, mais il ne fonctionne pas du tout...

Voila j’espère qu'un génie du code saura m'éclairer.

<html>

    <head>

        <script type="text/javascript" src="js/jquery.js"></script>
        <style>

            #menu1 {
                width: 204px;
                height: 102px;
                background-color: #243470;
            }

            #menu2 {
                width: 204px;
                height: 102px;
                background-color: #017761;
            }

        </style>
        
    </head>

    <body>

        <div id="div1"></div>
        <div id="div2"></div>

        <script>

            $(function(){
                $('#div1').mouseover(function(){
                    $('#div2').transition({ x: '204px' });
                )};
            )};

        </script>

    </body>

</html>