Не работает анимация (animate) в Jquery

Ребят, всем привет. Есть такой код.

Html

<div class="menu">
    <div><a href="#"><img src="img/menu_1_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_2_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_3_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_4_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_5_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_6_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_7_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_8_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_9_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_10_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_11_un.jpg"/></a></div>
    <div><a href="#"><img src="img/menu_12_un.jpg"/></a></div>
</div>

Jquery

$(function(){

    $('.menu div a').hover(function(){
                $(this).animate({
                    $(this).find('img').attr('src','img/menu_1.jpg') 
                }, 300);

        },

        function(){
                $(this).animate({
                    $(this).find('img').attr('src','img/menu_1_un.jpg')
                }, 300);

        });
        });

Хочу, чтобы при навидении на картинку она плавно менялась на другую (из чернобелой в цветную). Но что-то не фурычит скрипт. Ребзи, подскажите что и как?