javascript - マウスホバーでdivをアニメーション化して離れる

Question

リストを左から右に、またはその逆にアニメーション化しようとしていますが、div リストにマウスを置いたときに左から右にアニメーション化し、マウスがその div を離れると、リストが右から左にアニメーション化します。

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

デモはこちら

Answer 1

jsFiddle デモ

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