Javascript 悬停（mouseleave）方法不显示效果

我有一系列的图像，它们在悬停时会改变它们的图像，还有一个div动画（作为覆盖）在悬停时显示在图像上

代码如下：

// 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');
    }
);

---

我的问题是，只有第一个函数（mouseenter）中的效果起作用，而在mouseleave方法中，叠加立即消失，淡入淡出效果不起作用！这段代码有什么问题？

我知道这可能有点麻烦，但是您是否尝试过将它们分成一个mouseenter（）函数和另一个mouseleave（）函数？我知道hover（）应该涵盖这两个方面，但是，我在代码中没有看到任何错误，因此我只能按照我所说的去做

你能创建一个JSFIDLE来演示吗？我尝试了单独的鼠标进入和离开，但结果完全相同。