鼠标悬停并离开时动画div

时间:2013-09-09 10:51:03

标签: javascript jquery html css

我尝试从左到右动画列表,反之亦然,现在我想要当鼠标悬停在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

2 个答案:

答案 0 :(得分:2)

jsFiddle Demo

<强> 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 leftright属性。

按如下方式更新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了解演示。