The animation will reset if the mouse hovers over the button and then moves away

Question

The animation will reset if the mouse hovers over the button and then moves away

Looking for some help in web development! I have created a website where a word triggers an animation when hovered over - a picture slides down and fades in. However, I've noticed that if I slightly move the mouse while still hovering over the word, the animation reverses. It creates a jerky motion with the picture going up and down until I move completely off the word.

I'm seeking a simple example or solution to ensure that moving the mouse on the word does not affect the animation, and it only reverses when the mouse is no longer hovering over it.

If you have any advice or questions, please feel free to ask!

javascript html css

Answer 1

Answer №1

Here is a suggested approach:

$( "#element" ).on("mouseover", function() {
      //Perform animation for mouseover
    });
    $( "#element" ).on("mouseleave", function() {
       //Animate out when mouse leaves
    });

You can also try applying some CSS magic like this:

.object{
 top:0;
 transition-duration: 4s;
}
.element:hover ~ .object{
  top:50px;
}

Answer 2

Here is a suggested approach:

$( "#element" ).on("mouseover", function() {
      //Perform animation for mouseover
    });
    $( "#element" ).on("mouseleave", function() {
       //Animate out when mouse leaves
    });

You can also try applying some CSS magic like this:

.object{
 top:0;
 transition-duration: 4s;
}
.element:hover ~ .object{
  top:50px;
}

The animation will reset if the mouse hovers over the button and then moves away

Answer №1

Similar questions

The Java script is currently incompatible with Firefox, Internet Explorer 7, and Internet Explorer 6

Guide to adding an HTML node both before and after another node in R

The Vue.js page loads prior to the completion of the Axios request fetching data

Issues persist with AJAX call to servlet

Adjust the background color of Ant Design button

Is it possible to utilize a computed property for dynamically styling a table row based on certain conditions?

Have the functionality of right clicking and selecting Paste work in the input field using style=text and a button

Tips for incorporating images from Jade files when using CSS in Node.js rendering:

What is Flask's approach to managing JSON data?

How can I include an HTML tag within a select input value in a React.js project?

Tips on submitting an Array from a Textarea to mongoDB

Executing a Javascript GET request leading to a 301 redirect

"We are unable to set a value for a global array unless we utilize the .push() method

Tips for changing the parent div's height following a translateY(-50%) transformation

Tips for configuring identical libraries under different names

Creating a database using Angular2+ in CouchDB can be achieved by following these steps

Using jQuery to select the input value and append content, then utilizing the same input value as the added content

What is the best way to extract information from HTML on an Android device?

Enhance your Material UI Button with Advanced Text Alignment Options for Compact Screens

Unlocking the power of jquery to access nested arrays in JSON data structures