这就是我想要实现的目标:我有一个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
答案 0 :(得分: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);
});
});
});
答案 1 :(得分:0)
我会直接调用所有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);
});
});
});