JQuery Menu Script Experiencing Technical Difficulties with Animation

At the top of my page, there is a menu button that has a CSS :hover animation when hovered over.

$('.menu_button').click(function () {
                $(this).animate({
                    top: '-=50'
                }, 250);
                $('nav').delay(250).animate({
                    top: '+=50'
                }, 250);
                $('nav').mouseleave(function () {
                    $(this).delay(750).animate({
                        top: '-=50'
                    }, 250);
                    $('.menu_button').delay(1000).animate({
                        top: '+=50'
                    }, 250);
                });
            });

When I click on the menu button, it slides up and the menu slides down as shown in the fiddle. Upon mouse leave, the animations reverse direction after 750ms.

However, after playing around with it 2 or 3 times, the menu button sometimes slides down farther than its original position. Occasionally, it even disappears out of view at the top. I can't pinpoint why or when this occurs. The glitch seems to happen when hovering above the top inside the div, rather than clicking directly on the button.

Any suggestions or ideas on what could be causing this issue?

Here is the fiddle: http://jsfiddle.net/dennym/c5D22/

Regards, dennym

Answer №1

Transfer the navigation animation to an unidentified callback function and establish the top attribute as absolute values using px units:

$('.menu_button').click(function () {
    $(this).animate({
        top: '-50px'
    }, 250, function () {
        $('nav').animate({
            top: '50px'
        }, 250);
    });
});

$('nav').mouseleave(function () {
    $(this).delay(750).animate({
        top: '-50px'
    }, 250);
    $('.menu_button').delay(1000).animate({
        top: '-10px'
    }, 250);
});

Demonstration available at: http://jsfiddle.net/c5D22/4/

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

Unable to send a PHP array to jQuery

Struggling to transfer PHP-encoded array to JavaScript. homepage.php echo '<script src="script.js"></script>'; $a=array(1,2,3,4,5); echo json_encode($a); ?> script.js: $.ajax({ method: 'GET', url: 'index ...

An alternate solution for achieving synchronous behavior in form submit button click event handling without using the async: false option

Operating with a login form is essential, and our current practice includes utilizing an AJAX call to validate information before proceeding with the login submission. Here is the existing code snippet being employed: (function ($) { var errorMessageH ...

CSS issue: Font size

Can someone help me out with a CSS issue that has been tripping me up? I've been working with CSS for three years now, and this particular problem is stumping me. I have defined some styles in my CSS file that should be applied to the content of my w ...

Passing a JavaScript value to a Bootstrap modal and then utilizing it as a C# variable

I’ve been grappling with this issue for the past few days, and it seems like I might be overthinking things. When I open a bs modal dialog, I can successfully pass a value via the data-id attribute. I can also store this value in a hidden field or div. ...

The image slider script I've built is functioning perfectly in Codepen, but unfortunately, it's not working as

My image slider called Orbit is functioning properly on Codepen.io, however when I try to run the exact same code on Plunker, it doesn't work at all. <ul class="slider" data-orbit> <li> <img src="http://foundation.zurb.com/docs/a ...

Keep an ear out for upcoming occasions once the transition has been completed

I am looking to create a smooth transition effect that will push the main content downwards when the Twitter Bootstrap collapse menu is activated using the toggle button. However, I have noticed an issue where if I quickly double click the toggle button, ...

How should image dimensions for a background image be properly specified in CSS?

In my CSS file, I have defined styles for mini icons like this: /* Total counts - mini icons */ span.count-facebook { background: #fff url(../images/mini-icons/facebook.png) no-repeat 1px center; } span.count-plusone { background: #fff url(../images/mini- ...

Issue: The system does not recognize 'cleancss' as an internal or external command

After successfully installing clean-css via npm command line, I was eager to start using it to concatenate and minify some css files. However, my excitement quickly turned to frustration when I encountered this error: 'cleancss' is not recognize ...

Adjusting Media Queries according to the browser window's zoom level

Is there a way to detect the browser width dynamically? For instance, can I adjust the CSS styling based on zoom adjustments like ctrl + or ctrl -? By "box," I am referring to a perfectly square shape. So, when the browser width is 100%, I want a layout wi ...

this object and its counterpart within a click event

I created my own JavaScript class and tried to use jQuery's $(this) and object-this in a click event. jQuery's $(this) works fine, but the object-this is not defined. http://jsfiddle.net/j33Fx/2/ var myclass = function(){ this.myfunction ...

Utilize C# and SmtpClient to efficiently send HTML emails

Is there a way to send HTML emails instead of plain text using SmtpClient? I have been following the code provided in this solution, but the output always ends up as plain text. For example, the link in the sample message below is not displayed as an activ ...

I am curious as to why the Bootstrap 4 dropright selected menu appears as a default browser button in Chrome, while it functions seamlessly in Firefox

An issue has been identified that is specific to Chrome. The dropright selected menu appears differently in Chrome compared to Firefox, where it displays correctly with a white background. !https://i.sstatic.net/BulRA.jpg The Bootstrap version being used ...

The issue with displaying Infogram embed code in a React application

Hi there, I'm having an issue with embedding a code from infogram into my react app. Here is the code snippet: <div class="infogram-embed" data-id="861ca70e-552c-4a4f-960a-4c7e7ff62881" data-type="interactive" data-title="Step by Step Charts">& ...

Animating the background of an element to be null using jQuery

When hovering over an element with no background, I've implemented a hover effect that animates the background color. The animation works on hover, but does not revert back to no background when not hovered: $('#home_sensors_products').hove ...

What is the best way to position a title at the bottom center of each image within my grid gallery?

I'm struggling to find a way to position a title at the bottom of each image in my grid gallery, right in the center of the photo with a light-gray background. I want the text to be fully visible regardless of the image used. Currently, I can only put ...

Only initiate an AJAX call if there are no other pending AJAX requests from prior function invocations

Arriving at a new, chaotic code base with no testing available has presented me with a significant challenge. I am currently struggling to resolve an issue without the use of ES6, only relying on plain vanilla JS and jQuery. The scenario: Within a web pag ...

Difficulty with Jquery's random selection of grid divs

I am working on a grid layout consisting of 9 divs nested in columns of three. The objective is that when the main grid (with ID #left) is clicked, two divs from the middle row (row="1") should have the class .show randomly applied to them. In the column w ...

Can the text color be customized to match the brightness level of the background area being covered?

Does anyone know of a plugin or method that can automatically change the color of text or swap predefined images/icons based on the average brightness of its parent element's background? If the background is dark, it should make the text white or swit ...

Exploring ways to integrate Javascript and CSS into a Bootstrap lightbox modal dialog?

Can someone help me figure out how to use the bootstrap lightbox to display a form with specific CSS style and JavaScript code for the form? I'm having some trouble implementing it. I specifically need this setup because I am using Selectize.JS to cr ...

Generating Data into JSON Array/Object

I have some JSON data here, { "cleaning" : [ { "MOPS" : [ { "id" : "123", "name" : "best mops", "price" : "123" }, { ...