在另一个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而不是第一部分上动画。

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

Answer 2

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

E.g。类似的东西：

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