Add motion to the div element when hovering and moving the mouse away

Question

Add motion to the div element when hovering and moving the mouse away

Looking to add animation to a list moving from left to right and vice versa. Now, I want the list to animate from left to right when the mouse hovers over the div, and then animate from right to left when the mouse leaves the div. Can someone assist me with 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

Answer 1

Answer №1

Check out this Demo on jsFiddle

CSS:

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

Javascript:

$('.ul_div').hover(

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

 function () {
     $('.ul_div ul').animate({
         left: '0',
         background: '#eee'
     }, 100, function () {
         $('.ul_div ul').css({
             display: 'none'
         });
     });
 });

Answer 2

Check out this Demo on jsFiddle

CSS:

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

Javascript:

$('.ul_div').hover(

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

 function () {
     $('.ul_div ul').animate({
         left: '0',
         background: '#eee'
     }, 100, function () {
         $('.ul_div ul').css({
             display: 'none'
         });
     });
 });

Answer 3

Answer №2

To utilize the CSS properties left and right, it is necessary to define positioning for the ul element.

Modify your CSS in the following way:

#ulEle {
    position: absolute;
}

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

Next, make adjustments to your jQuery code by incorporating the hover() function with the code snippet provided below:

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

For a demonstration, refer to the updated jsFiddle.

Answer 4

To utilize the CSS properties left and right, it is necessary to define positioning for the ul element.

Modify your CSS in the following way:

#ulEle {
    position: absolute;
}

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

Next, make adjustments to your jQuery code by incorporating the hover() function with the code snippet provided below:

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

For a demonstration, refer to the updated jsFiddle.

Add motion to the div element when hovering and moving the mouse away

Answer №1

Answer №2

Similar questions

Is it possible for users to change months on a website using the Python calendar library?

How to set cells to plain text in google sheets

What is the most effective way to loop and render elements within JSX?

The art of selecting elements and attaching event listeners in a React environment

The jQuery window.location.replace function seems to be stuck in a never

MUI Error: Unable to locate module - "Error: Unable to resolve 'moment' module"

"Experience the mesmerizing transition effects of Angular Bootstrap tabs as they gracefully glide in

Can the tab button be used to move to the next field?

Ways to extract information from an Object and save it into an array

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

Tips for adjusting the color of a linear gradient in a shimmer effect

How can I automatically redirect a React page once I receive a response from Express?

Action of Submit Button Based on Field Matching Another Form

Unable to display label in form for Angular 2/4 FormControl within a FormGroup

What is the process for setting up a new router?

Ways to style a div element in CSS to achieve a unique shape

Is it possible to use jQuery to apply CSS styling to a div that is dynamically called by Javascript

The hover effect does not carry over to duplicated HTML

What is the best way to update the color of a label in a Mantine component?

Is there a way to select only a single line from an HTML document?