Require triggering action upon hovering and reverting back to the original state after 7 seconds

I am working on a website that incorporates various animation effects.

  1. My goal is to activate a gif (animation) when hovered over and have it return to a static state once the cursor is moved away.

  2. When hovering, I want Image1 to disappear and reveal Image2, then after the mouse leaves, Image1 will reappear after 7 seconds.

For example, Image1 shows a TV with curtains. When the mouse hovers over it, Image1 will vanish and display Image2, which will then transition back to Image1 after 7 seconds.

What is the most effective way to achieve this?

javascriptjquerycssanimationgif

Answer №1

If you want to achieve this effect, consider using the following code:

$("#myStaticImage").mouseenter(function(){

$("#myHiddenGif").fadeIn().delay(7000).fadeOut()

})

UPDATE: Using mouseenter instead of hover yields better results.

Make sure that the hidden gif is positioned above the static image and set to display: none.

See a working example here: JS fiddle

Learn more about jQuery .delay() here.

Answer №2

If you want to achieve this effect using jQuery, here is an example code snippet:

$("#image_id").hover(function(){
    $(this).attr('src', 'http://new-gif-source');
}, function(){
    $(this).attr('src', 'http://static-img-source');
});

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

jQuery is employed to create loading messages

I've encountered an issue with the loading message during my ajax call data retrieval process. It seems like the message either appears halfway through rendering until the ajax finishes or doesn't appear at all, leaving users confused. The loadin ...

ajaxjquery

Whenever I try to use npm install --force, I always encounter this issue

An error occurred while trying to run npm i --force. When attempting to run npm i, a series of errors are displayed. npm ERR! code ECONNRESET npm ERR! errno ECONNRESET npm ERR! network Invalid response body while attempting to fetch https://registry.npmjs ...

javascriptnode.jsreactjs

What is the best way to activate a jQuery function during an AJAX request?

Have a question concerning jQuery? I am working on an ajax function that triggers a click event after successful execution: var rowdiv = '#DiamondSetting'; $(rowdiv).hide(); $.ajax({ type: "post", ...

jqueryajax

Using Angular and TypeScript/javascript singletons across multiple browser tabs

I am curious about whether the TypeScript singleton class, used as an MVC model object in my Angular application within one browser tab, would be different from or the same as the singleton loaded into another tab within the same browser instance. The set ...

javascriptangulartypescript

Tips for retrieving return values from an ajax form submission

When using ajax to submit a form, I encountered an issue where the process would halt at api.php and not return to the ajax success. Below is the code snippet: <form method="POST" id="form_1" action="../api.php" enctype="multipart/form-data" novalidate ...

javascriptphpjqueryajaxforms

JavaScript click event not triggering on ASP.NET button

Currently, I am attempting to invoke a C# function from JS without using ajax. One approach I have tried is creating an ASP.NET button that, when clicked, calls the C# function and triggers the click event from JS: In the HTML section: <asp:Button run ...

javascriptc#htmlasp.netclick

Nested angular drag and drop functionality for creating dynamic lists

Currently, I am exploring the functionalities of nested drag and drop using the following link: . When it comes to parent items, everything works smoothly as expected. I have implemented a list with the attribute dnd-list="ItemsParent" for the parent ite ...

jqueryangularjsangularjs-ng-repeat

Navigating through states in Angular-ui-router seamlessly while performing asynchronous calls

Attempting to initiate an asynchronous API call through the onEnter function to a new .state. onEnter: function(StatFactory){ StatFactory.getStats(function(res){ console.log("callback"); }); } What I h ...

javascriptangularjsasynchronousangular-ui-routermean-stack

What is the best way to manage a group of checkboxes using EJS?

I am currently utilizing ejs for my website pages and on one particular page, I have an array of objects. The number of objects in the array is not known when the page initially loads. This page allows me to edit a series of announcements and I would like ...

javascriptjquerynode.jscheckboxejs

exploring a 2d grid with JavaScript for optimal routes

Hi there, I've been working on this problem for a few hours and I just can't seem to get 10 random test cases out of the 100 right. If anyone could offer some help, it would be greatly appreciated. Here's the link to the problem: Just a he ...

javascriptarrayspath-finding

Website API: decouple backend and frontend functionality through an API

I am currently working on the development of a website and an app created through Cordova. The app will essentially mirror the functionalities of the website. The website is already established and heavily relies on JavaScript, with potential considerati ...

javascriptangularjsapicordova

How can you use Knex to order the results for each WHERE clause in a SELECT query?

When querying a database using knex, the desired results should be ordered in a specific manner. The current code provides the required results but lacks the expected order. knex("FRUITTBL") .select("FruitTag", "FruitName", ...

javascriptnode.jsdatabaseexpressknex.js

How can I resolve the issue of background-size not functioning properly?

Struggling to set a background-image with the 'cover' size property inside a div. Despite trying different values for background-size, the image always shows up in full size within the div. I've searched for similar answers on SO, but nothi ...

htmlcss

Encountered an Angular HPM localhost error while attempting to proxy a request for /api/books from localhost:4200 to http://localhost:3333

After spending several hours attempting to resolve this issue, I am still unable to successfully make a post request due to an error. Initially, I used ng serve, but switched to npm start and the errors persist. Error: [HPM] Error occurred while attempti ...

javascriptnode.jsangularmongodbproxy

Export Blender files (version 70) to JSON format for skinning animations in three.js

After spending a few weeks mastering the Blender to json skinning export process, I was thrilled with the excellent results achieved prior to the update to three.js exporter v70. However, when I had to rebuild my development machine and installed the new ...

animationthree.jsskinningblender-2.61exporter

I am looking to enhance the readability of my asynchronous function calls

At the moment, I am handling my Promises by calling an async function and then chaining it with .then(). But I feel like there could be a more readable approach. This is how it currently works: const fetchData = async() => { const response = await ax ...

javascriptnode.jsreactjsaxios

How to customize TextField error color in Material-UI using conditional logic in React

Currently, I am incorporating the React Material-UI library into my project and faced with a challenge of conditionally changing the error color of a TextField. My goal is to alter the color of the helper text, border, text, and required marker to yellow ...

javascripthtmlcssreactjsmaterial-ui

Encountering a Problem with the onEnter Method in React

Seeking to implement route authentication in my ReactJS app using React Router, I encountered an error when adding the authentication function to the onEnter property of a specific route. Error: Uncaught RangeError - Maximum call stack size exceeded Rout ...

javascriptreactjsreact-router

The background is obscured from view because of its current positioning

The issue I am facing is that the background color of the <ol> list is not showing correctly. This problem arose after I floated the label to the left and the input to the right. How can I resolve this? The desired outcome should be: My current resu ...

htmlcssposition

Is there a straightforward method to send JSON data using $.ajax in jQuery? (By default, jQuery does not handle JSON data transmission)

I've been attempting to send a nested JSON structure using $.ajax or $.post (tried both methods). The $.ajax code I used is as follows: $.ajax({ url: '/account/register/standard', method: 'post', data: datos, dataT ...

jqueryajaxjson