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

javascriptjqueryhtmlcss

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

dealing with errors coming from a child asynchronous callback function

function main(){ try { subCallbackFunction(1,(err,res) =>{ if(err){ throw Error(err); } }) } catch (e) { /// Handling error from subCallbackFunction inside this catch block ////// conso ...

javascriptnode.js

Displaying vertical content with a horizontal scroll using Bootstrap

I have created a div container and I would like to implement a horizontal scroll bar when there are more than four items (each item consists of a picture with a title). Desired outcome: The issue I am facing is that by using the code below, I end up with ...

csstwitter-bootstrapbootstrap-4

The Nuxt authentication middleware fails to function properly upon clicking the back button in the browser

When it comes to implementing the protected route in Nuxt, I have found that using middleware is the best approach. In my implementation, I utilized the cookie-universal-nuxt module. Everything was running smoothly until I encountered a bug. When a user&a ...

javascriptvue.jsnuxt.js

The functionality of the controls is not functioning properly when attempting to play a video after clicking on an image in HTML5

While working with two HTML5 videos, I encountered an issue with the play/pause functionality. Despite writing Javascript code to control this, clicking on one video's poster sometimes results in the other video playing instead. This inconsistency is ...

javascriptjqueryhtmlvideo

Joining Two Texts in HTML with a Link Embedded within

Within my HTML code, I have two specific strings: "Forgotten your password?" and "Please" 'HPERLINK' "to change your password". To manage these strings efficiently in different languages, I utilize a messageBundle file to store constants. This f ...

javascripthtmlstring

Incorporating an HTML image into a div or table using jQuery

I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...

javascriptjqueryhtmlcss

I'm interested in knowing how to switch between two functions using Angular

I have developed a grocery list application where each row contains the name of a food item. The layout includes a left column for items that are not needed and a right column for items that are needed. Currently, I am able to change the state by clicking ...

javascriptangular

"Woops! An error occurred with the message: "SassError: Could not locate the specified target selector" while working with SCSS Modules and incorporating

Currently, I am working with Next.js and utilizing SCSS Modules. To incorporate Bootstrap into my project, I opted to install it using the command npm install bootstrap. Following this installation, I went ahead and created a new file titled common.scss wi ...

csssassnext.jsbootstrap-5

A guide to sharing session variables with express views

Struggling to access session variables in EJS views and encountering various challenges. To locally access req.session, I've implemented middleware as outlined in this guide on accessing Express.js req or session from Jade template. var express = re ...

javascriptnode.jsexpressexpress-session

While attempting to use $scope.$apply() in Angular, I encountered a bug that

I have set up a specific example in a jsbin: http://jsbin.com/deqerelita/1/ Situation The concept is quite straightforward. You click a button, the controller adds to the model, and the view updates accordingly with a hidden input type="file". After the v ...

javascriptangularjs

Difficulty encountered while using MySQL column update button

I'm looking for assistance in updating my database using an SQL statement after a button is clicked on the website. I attempted something but it was unsuccessful. Could anyone provide guidance? Here's the code snippet: http://pastebin.com/D0S83Jg ...

phphtmlmysqlbutton

What steps can be taken to enlarge the select button within a <select> field?

Is there a way to enlarge the size of the downward-pointing arrow button within a <select> element? Here is an example of what my code looks like: <select> <option>Select City</option> <option>City1</option> <o ...

htmlcss

JavaScript post method for JSON data: no input or output values

I am currently developing a page that extracts data from an HTML table consisting of two columns and an index of a form, and then converts it into a JSON string. The intention is to pass this data into PHP for further processing, perform calculations on th ...

javascriptphpjqueryhtmljson

Is it possible for a function parameter to utilize an array method?

Just starting to grasp ES6 and diving into my inaugural React App via an online course. Wanted to share a snag I hit along the way, along with a link to my git repository for any kind souls willing to lend a hand. This app is designed for book organization ...

javascriptreactjsweb-applicationscomponentses6-promise

Swapping out data within a container

I've been experimenting with creating a hangman game using JavaScript and HTML. However, I'm facing an issue where clicking on a letter doesn't replace the "_" placeholder. var myList=["Computer","Algorithm","Software","Programming","Develop ...

javascripthtmlcss

Tips for marking a textarea as mandatory when a choice is made

I'm creating an .html document for conducting a complete system check and confirming various aspects of its functionality. In this page, there is a table within a form structure where each row represents a step in the system verification process (e.g. ...

javascripthtmltextareaselectionrequired

Exploring the power of jQuery closures and handling events like mouseover and mouseout

I'm currently grappling with the concept of utilizing closures in conjunction with jQuery event functions. The challenge I am facing involves creating rounded shapes on the screen that stop and fade when hovered over, then resume fading when the mous ...

javascriptjqueryeventsclosures

Tips for maintaining knowledge after redirecting to a new page

Building an app using Ionic 4 where I need to display vouchers from a database as images. Each image should act as a link to a details page showing more information about that specific voucher. However, I am struggling to figure out how to keep track of th ...

htmlangulartypescriptionic4

Tips for safeguarding the security of my PHP API when accessed through Ajax using OAuth2

I've developed a cross-origin ajax application that utilizes some personal APIs I created. Now, I'm looking to enhance the security measures so only my application has access to the API. After researching, I came across OAuth2 at OAuth2. I foll ...

javascriptphpjqueryajaxoauth

Steps to display text in a div upon clicking on an image

I am trying to create an image with two DIVs separated by a black line. The left DIV will contain 4 images, and I want the following functionality: When a user clicks on any of the buttons in the left DIV, a corresponding text should be revealed in the ri ...

javascriptjqueryhtml