我尝试从左到右动画列表,反之亦然,现在我想要当鼠标悬停在div列表上从左到右动画时,当鼠标离开该div时,它会从右到左列出动画,任何人都可以帮我这个。< / p>
$('.ul_div').mouseover(function () {
$('.ul_div').css({ display: 'block' });
$('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
});
<div class="ul_div">Hover Me<div>
<ul id='ulEle'>
<li><a href="">demo</a></li>
<li><a href="">demo</a></li>
<li><a href="">demo</a></li>
<li><a href="">demo</a></li>
</ul>
演示Here
答案 0 :(得分:2)
<强> CSS:强>
.ul_div ul {
position: absolute;
display: none
}
.ul_div {
border:2px solid Red;
position: relative;
}
<强>使用Javascript:强>
$('.ul_div').hover(
function () {
$('.ul_div ul').css({
display: 'block'
});
$('.ul_div ul').animate({
left: '100px',
background: '#ccc'
}, 100);
},
function () {
$('.ul_div ul').animate({
left: '0',
background: '#ccc'
}, 100, function () {
$('.ul_div ul').css({
display: 'none'
});
});
});
答案 1 :(得分:1)
您需要在ul
元素上指定定位才能使用CSS left
和right
属性。
按如下方式更新CSS:
#ulEle {
position: absolute;
}
.ul_div {
border:2px solid Red;
position: relative;
}
然后,您应该更新您的jQuery代码以使用hover()
函数,并使用以下代码:
$('.ul_div').hover(function () {
$('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
}, function() {
$('.ul_div ul').animate({ left: '0px', background: '#ccc' }, 100);
});
请参阅updated jsFiddle了解演示。