Javascript 在鼠标悬停并离开时设置div动画

我试图从左到右动画列表，反之亦然，现在我想当鼠标悬停在div list上时，从左到右动画，当鼠标离开div而不是list时，从右到左动画，有人能帮我吗

$('.ul_div').mouseover(function () {
    $('.ul_div').css({ display: 'block' });
    $('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
});

将鼠标悬停在我身上

---

演示

您需要在

ul

元素上指定定位，以便使用CSS

左

和

右

属性

按如下方式更新您的CSS：

#ulEle {
    position: absolute;
}

.ul_div {
    border:2px solid Red;
    position: relative;
}

然后，您应该更新jQuery代码以使用该函数，并使用以下代码：

$('.ul_div').hover(function () {
    $('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
}, function() {  
     $('.ul_div ul').animate({ left: '0px', background: '#ccc' }, 100);
});

请参阅演示文稿。

CSS:

.ul_div ul {
    position: absolute;
    display: none
}
.ul_div {
    border:2px solid Red;
    position: relative;
}

$('.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'
         });
     });
 });

Javascript:

.ul_div ul {
    position: absolute;
    display: none
}
.ul_div {
    border:2px solid Red;
    position: relative;
}

$('.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'
         });
     });
 });

---

仅供参考，请在您的问题中包含所有代码。链接到fiddle是很好的，但是如果jsfiddle离线，它将是无用的。