aimate 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> 

Demo Here

Answer 1

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

Answer 2

Вы должны указать позиционирование на 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 для демо ,