Troubleshooting delays in jQuery animations

Hello, I've encountered an issue with the delay in jQuery's .animation function. When quickly moving over boxes, the animation doesn't trigger; however, it works perfectly when done slowly. Any assistance on adding a 500 millisecond delay without breaking the original script would be greatly appreciated. Thank you.

Original Script Without Delay:

$(document).on('mouseenter', '.learnmore', function(e){
    e.preventDefault();
    $(".top", this).css({top:0}).animate({top:-205},{duration:500});
    $(".bottom", this).css({top:0}).animate({top:-210},{duration:500});
});
$(document).on('mouseleave', '.learnmore', function(e){
    e.preventDefault();
    $(".top", this).css({top:-205}).animate({top:0},{duration:500});
    $(".bottom", this).css({top:-210}).animate({top:0},{duration:500});
});

Example With Delay: http://jsfiddle.net/nblackburn/jSPMs/

Warm regards,
Nathaniel Blackburn

Answer №1

Give this a shot:

http://jsfiddle.net/jSPMs/8/

$(document).on('mouseenter', '.learnmore', function(e){
    e.preventDefault();
    var _this = $(this);
    $(this).data("timer", setTimeout(function(){
        _this.data("timer", null);
        _this.find(".top").animate({top:-205},500);
        _this.find(".bottom").animate({top:-210},500)
    }, 500));

});
$(document).on('mouseleave', '.learnmore', function(e){
    e.preventDefault();
    clearTimeout($(this).data("timer"));
    if(!$(this).data("timer"))
    {
        $(".top", this).animate({top:0},500);
        $(".bottom", this).animate({top:0},500);
    }
});

Answer №2

It is advisable to avoid setting CSS using the .css() method within specific callbacks, and instead rely on the .animate() method.

In addition, you have the option to use the unqueued version of .animate() by simply passing the option queue=false.

By implementing this approach, your code could resemble the following example (check out this jsfiddle):

$(document).on('mouseenter', '.learnmore', function(e){
    e.preventDefault();
    $(".top", this).delay(500).animate({top:-205},{duration:500,queue:false});
    $(".bottom", this).delay(500).animate({top:-210},{duration:500,queue:false});
});
$(document).on('mouseleave', '.learnmore', function(e){
    e.preventDefault();
    $(".top", this).animate({top:0},{duration:500,queue:false});
    $(".bottom", this).animate({top:0},{duration:500,queue:false});
});

The implementation appears to be quite smooth in its execution. Wouldn't you agree?

Did this clarification prove beneficial to you?

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's method $.data() now returns a boolean value instead of a string

Can anyone help me with this html element I have? <a href="javascript:void(0)" class="sortArrow down active" data-order_asc="false"> <img src="/static/web/img/down-active.gif"> </a> The issue I am facing is that $('a.sortAr ...

Retrieve information about the clicked item using the Backbone framework

I have a unique webpage that showcases an impressive collection of books. Each book listed on the page comes with essential information such as the title, price, and description. This data is imported from a JSON file. Excitingly, when users click on any ...

Expand your dropdown options with a Popup Input feature in the ComboBox to seamlessly add a 'New Option'

Hello there! I am currently learning, so please be patient with me. Currently, I am in the process of developing a web application for a product management system. The company I work for purchases products from multiple vendors, both through wholesale and ...

Updating the data displayed in the browser window with the response from a subsequent API call using JavaScript

Currently, I have three functions that retrieve JSON data from an API using HTML buttons and convert it to a string with stringify. The results are then displayed in a div, extending the current browser page with each new call. I am looking for a way to ha ...

Troubleshooting Limitation Problem with Bootstrap Multiselect

I recently created a multiselect dropdown menu using Bootstrap Multiselect. I successfully set a limit on the number of options that can be selected (in this case, 5), and once the limit is reached, the additional options become disabled. Everything works ...

Is there a way to optimize downloading multiple identical images using html, css, jquery, etc.?

My chess board features 64 squares, each with a picture of a board piece on either a light or dark square. To ensure proper formatting, a Clear knight is placed on the board. The design utilizes a div element with a background image (representing light or ...

Issue with CKEditor within a ColorBox dialog box

Could someone please assist me? I am facing an issue with my HTML page where I have incorporated a ColorBox modal popup. Inside the ColorBox popup, there is a CKEditor. The problem is as described below: In Internet Explorer, the CKEditor functions proper ...

Can you modify the current HTML code of a Wix website?

I am currently developing a website using Wix and have encountered an issue with the page description. Despite editing it in Wix, the changes are not reflecting on the live site. Upon inspecting the source code in Chrome, I identified the problem lies wi ...

What could be causing the jQuery .load() function to trigger twice?

While using jQuery 1.4 along with jQuery History, I noticed that Firebug/Web Inspector are displaying 2 XHR GET requests on each page load (which doubles when visiting the homepage (/ or /#). For example, if you visit this or any other page with Firebug e ...

CSS filter for Internet Explorer

Can this CSS class be made to work in Internet Explorer 11? .inactive { filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28); } I attempted to implement the SVG grayscale filter but it was unsuccessful, causing issu ...

The process of setting up React in the terminal becomes tricky when the VS code editor is directing to a non-existent path

Issue with VS Code editor not recognizing existing path Recently attempted to install React using the npx command in the terminal, following steps from various tutorials on YouTube. Despite trying all suggested methods, the installation didn't succee ...

How to center the navigation list vertically with double lines and maintain the href block?

Looking for a solution to align vertically in a basic navigation list bar, particularly when some items have two lines of text. I want the text to be vertically aligned to the middle, while still maintaining the ability to hover and click within the list ...

What is the process for transferring an image from the main page to another?

For days, I have been searching for an answer without any luck. It seems that I just can't wrap my head around it and apply it to what I am working on. Currently, I am using PHP to store images on the server when a user hits submit. My goal is to dis ...

Totally clueless when it comes to JSON

After diving into tutorials on JSON, the structure and syntax are finally clicking for me. However, I'm currently working on a project that requires a GET, and it seems like JSON could help with this. I've come across comparisons of JSON and AJA ...

Effortlessly update by clicking the new button on Kendo Grid

I am currently using the Kendo UI grid to connect to a MySQL database. While the update and read functions are working fine, I am facing an issue with the create function. Whenever I input data into a new row and click update, nothing happens. I am unsure ...

Adjust the size of the content to fit the window dimensions

I am currently in the process of designing a new website, but I am facing difficulties with resizing the content to fit the actual window size. As they say, a picture is worth a thousand words. The first image shows how it should look, while the one below ...

The stylesheet is linked, but no changes are taking effect

I've linked my template.php to style.css, and when I make changes in template.php, they show up fine. However, if I make changes in the stylesheet, nothing happens. What should I do? My website is not live; I'm working on it using a WAMP server. ...

Tips for Importing HTML Table Data Line by Line into SQL Table

I have the following code here. I am looking to insert HTML table data row by row into an SQL database. However, with this current code, only the last row is being stored in the database table. I believe I need to implement a loop to read the data from e ...

Is there a way to mimic disabled input fields?

Is there a way to simulate input being disabled without actually changing the value in the input field, but still have that value sent with POST using a form? <input class="dis" type="text" disabled="disabled" value="111"> <input class="no" type= ...

Creating an engaging user experience by incorporating PHP to trigger a new image or window to pop up when hovering

After inquiring about achieving a similar functionality to , I was directed to JQuery. By using this, I successfully implemented a small window popup when hovering over images: http://jqueryui.com/tooltip/ However, I am struggling to create a setup that ...