Hover (mouseleave) method not showing effects

I have a series of images which change their image when hovering on them and also a div animate (as an overlay) on the image during hover.

The code is as follow:

// hide overlays
$(".mini-shop .item .image a div").hide();

// toggle overlay and second image
$(".mini-shop .item .image").hover(
    function() {
        $img = $(this).find('a img');
        $img.stop().hide();
        var src = $img.attr('src');
        $img.attr('src', $img.attr('data-csrc'));
        $img.stop().fadeIn(300);
        $img.attr('data-csrc', src);
        $(this).find('a div').stop().animate({
            'top': '80%'
        }, 300).css('display', 'block');
    },
    function() {
        $img = $(this).find('a img');
        $img.stop().fadeOut(100);
        var src = $img.attr('src');
        $img.attr('src', $img.attr('data-csrc'));
        $img.stop().fadeIn(300);
        $img.attr('data-csrc', src);
        $(this).find('a div').stop().animate({
            'top': '100%'
        }, 300).css('display', 'none');
    }
);

my problem is, only the effects in the first function (mouseenter) work and in the mouseleave method the overlay disappears immediately and the fade effect does not work! What is the problem of this code?