javascript - 在另一个 div onClick 和 onMouseLeave 中动画 div

Question

这就是我要实现的目标:我有一个 div(在下图中以黑色标记)，其中包含另外 2 个 div(以红色和蓝色标记)- 一个具有单个图像并显示，另一个具有3 张图片，目前处于隐藏状态。

当用户单击单个图像时，其父 div 会制作向上滑动动画并隐藏，第二个 div 会显示。

当用户离开父 div 区域时 - 它会制作向下滑动动画并返回到初始状态(图 1)。

我写了这段代码来制作向上滑动的动画:

$(".img_btn_info").click(function(){
    $(this).parent().animate({'margin-top': '-30px'}, 500);
});

它工作得很好。但现在我尝试编写第二部分的代码，当鼠标离开时，它并没有像我预期的那样工作——它在父 div 而不是第一个 div 下动画。

$(".img_btn_info").click(function(){
    $(this).parent().animate({'margin-top': '-30px'}, 500, function(){
        $(this).parent().parent().mouseleave(function(){
            $(this).animate({'margin-top': '30px'}, 500);
        });
    });
});

那么我怎样才能使它正常工作呢？

更新

这是一个 jsfiddle代码的

Answer 1

试着改变这个:

$(".img_btn_info").click(function(){
    $(this).parent().animate({'margin-top': '-30px'}, 500, function(){
        $(this).parent().parent().mouseleave(function(){
            $(this).animate({'margin-top': '30px'}, 500);
        });
    });
});

为此:

    $(".img_btn_info").click(function(){
        var $here = $(this).parent();
        $here.animate({'margin-top': '-30px'}, 500, function(){
            $(this).parent().mouseleave(function(){
                $here.animate({'margin-top': '0'}, 500);
            });
         });
     });

DEMO