Javascript 在另一个div onClick和onMouseLeave中设置div动画

以下是我试图实现的目标：我有一个div（在下图中用黑色标记），它包含另外两个div（用红色和蓝色标记）-一个有一个单独的图像并显示，另一个有3个图像，它当前处于隐藏状态

当用户单击单个图像时，其父div将生成一个向上滑动动画，并隐藏起来，然后显示第二个div

当用户离开父div区域时，它会制作向下滑动动画并返回初始状态（图1）

我编写了以下代码来制作幻灯片动画：

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

效果很好。但是现在我试着为第二部分编写代码，当鼠标离开时，它并没有像我预期的那样工作——它在父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);
        });
    });
});

那么，我如何才能使它正确工作呢

更新

下面是一组代码

尝试更改此代码：

$(".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);
            });
         });
     });

---

我将直接调用所有DOM元素，而不是使用.parent（）.parent（）。等等

例如，类似于：

$(".img_btn_info").click(function(){
    $('#second-box').animate({'margin-top': '-30px'}, 500, function(){
        $('#container').mouseleave(function(){
        $('#second-box').animate({'margin-top': '30px'}, 500);
        });
    });
});

---

JSFIDLE将是appriciated@SomnathKharat我用一个JSFIDLE链接更新了我的问题。问题是我的页面上有一些带有内部div的div，所以我必须使用.parent（）我没有看到第二个动画，在.mouseleave上。这是第二个动画：$（this.mouseleave（function（）{$here.animate（{'margin-top'：'0'}，500）; }); @Igal在答案中，请参见JSFIDLE pleaseOK，解决它！而不是

$（this）.mouseleave

它应该是

$this.parent（）.mouseleave

-以下是工作代码：非常感谢您的帮助！：）哦，是的，你可以修改它，无论你想要什么，我已经看到它工作得很好。很高兴能帮助你@Igal