我试图让图像在悬停时滑出,然后在悬停到新链接时滑回,但我似乎无法让它工作。
这是 JS
$(function() {
$('#menu_seo > li').hover(
function () {
var $this = $(this);
$('span',$this).stop().animate({
'right':'70px'
}).css({
'zIndex':'10'
});
},
function () {
var $this = $(this);
$('span',$this).stop().animate({
'right':'-10px'
}).css({
'zIndex':'-1'
});
}
);
});
和我的CSS:
#menu_seo {
position:relative;
}
ul#menu_seo li span {
height:60px;
width:15px;
position:absolute;
z-index:-1;
cursor:pointer;
}
ul#menu_seo li span.arrowout1 {
background-image:url(../arrow.png);
top:8px;
left:230px;
}
有人在这里看到我的问题吗?
最佳答案
首先你不能用 z-index
来做这个动画,您应该使用 css overflow:hidden
创建一个 mask 区域属性并使用 position
隐藏动画对象.
第二件事,你不能为对象设置动画 right
当该对象的 css 得到 left
时属性,这会产生冲突并且不起作用。位置值必须准确。
我建议你使用 jQuery 绑定(bind)方法,它很可靠,你可以使用多个事件,例如:click、hover、mouseenter、mouseleave。
这是正在运行的 jsFiddle:http://jsfiddle.net/ATPG9/11/
jQuery:
$('#menu_seo li').bind({
mouseenter: function() {
$(this).children('span').stop().animate({'right':'70px'},200);
},
mouseleave: function() {
$(this).children('span').stop().animate({'right':'-50px'},200);
}
});
CSS:
#left_aside {
overflow:hidden;
float:left;
width:230px;
height:900px;
background-color:#f2dada;
}
ul#menu_seo li span {
height:50px;
width:50px;
position:absolute;
cursor:pointer;
right:-50px;
}
关于javascript - jquery动画图像滑出ul列表后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13783961/