javascript - animate div on mouse hover and leave - Stack Overflow

admin管理员组

文章数量:1406031

I trying to animate listfrom left to right and vice versa,now i want when mouse hover on div list animate left to right and when mouse leave that div than it list animate right to left , can anyone help me for this.

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

I trying to animate listfrom left to right and vice versa,now i want when mouse hover on div list animate left to right and when mouse leave that div than it list animate right to left , can anyone help me for this.

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 9, 2013 at 10:54 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Sep 9, 2013 at 10:51 S. S. RawatS. S. Rawat 6,13144 gold badges4444 silver badges5959 bronze badges 1

• 1 FYI please include all code in your question. A link to a fiddle is great, but it will be useless if jsfiddle goes offline. – Rory McCrossan Commented Sep 9, 2013 at 10:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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'
         });
     });
 });

You need to specify positioning on the ul element in order to use the CSS left and right properties.

Update your CSS as follows:

#ulEle {
    position: absolute;
}

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

You should then update your jQuery code to use the hover() function, and use the following code:

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

Please see the updated jsFiddle for a demo.

本文标签： javascriptanimate div on mouse hover and leaveStack Overflow