Toggle or Mouse Event Img size

Toggle or Mouse Event Img size

I have images inside a div with a class, that I want to resize on mouseenter, go back to size at mouseleave.

For some reason I cant get it to work. Any thoughts of what I'm doing wrong? I also tried Toggle and that wouldn't work either.

Thanks!

  1.     <script>
            $(function() {
                $(".single_entry img").animate({
                width: 100}, 500);
               
             });

            $(".single_entry img")
            .mouseenter(function() {
                $(this).animate({
                    width: 300
                }, 1000);
            })
            .mouseleave(function() {
                $(this).animate({
                    width: 100
                }, 1000);
            });
           
         </script>

        <article class="single_entry">

            <img src="../News%20Pics/aeroflot_1.jpg" alt="The Test Image" />

        </article>