"Enhance Your Website with jQuery's Dynamic Multi-Animation

I'm facing an issue with my website where, upon clicking the contact link in the navigation bar, a contact box slides down and the navigation bar moves below it. However, when the contact link is clicked again to hide the contact box, the navigation bar remains in its moved position as if the contact box is still visible. Below is the code snippet:

contactBarBtn.click(function (e) {
    search_close();
    contactBar.toggle();
    navbarFixedTop.animate({ top: contactBar.height() }, 'slow'),
    contactBar.animate({ top: '0' }, 'slow'),
    contactCorner.css('display', 'block'),
    e.preventDefault();
    return false;
});

Any suggestions on how to fix this?

javascriptjqueryhtmlcss

Answer №1

I have discovered the answer.

contactBarBtn.click(function (e) {
    if (jQuery('.contact-bar-corner').css('display') == 'block') {  
        search_close();
        navbarFixedTop.animate({ top: '0' }, 'slow');
        contactBar.animate({ top: -contactBar.height() }, 'slow');
        stickyHeader.removeClass('sticky');
        contactCorner.css('display', 'none');
        e.preventDefault();
        return false;
    }
    else if (jQuery('.contact-bar-corner').css('display') == 'none') {  
        search_close();
        contactBar.show();
        navbarFixedTop.animate({ top: contactBar.height() }, 'slow');
        contactBar.animate({ top: '0' }, 'slow');
        stickyHeader.addClass('sticky');
        contactCorner.css('display', 'block');
        e.preventDefault();
        return false;
    }
});

Answer №2

One issue arises when top: contactBar.height() gets executed before contactBar.toggle() completes its operation, almost immediately in fact. To resolve this, it is recommended to include it inside the toggle function so that it runs only after the toggle animation finishes:

contactBar.toggle(function() {
  navbarFixedTop.animate({ top: contactBar.height() }, 'slow');
});

Furthermore, remember to use ; instead of , at the end of lines as pointed out by a commenter!

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

The YoutubePlayer's OnStateChange event is not triggering as expected

Having trouble with the YouTube player OnStateChange event not firing. I've researched similar posts but none seem to match my unique situation since I'm using a different version (chromeless JavaScript). Here's the HTML: <div id="ytapi ...

javascriptyoutube-apiyoutube-javascript-api

Navigating Divs Using jQuery

I am working with a class that has multiple divs, each with a unique id attached to it. I am using jQuery to dynamically cycle through these divs. This is a snippet of my HTML code: <div id ="result">RESULT GOES HERE</div> ...

javascriptjqueryhtmlcss

Leverage the power of require() beyond the confines of Node

I'm currently exploring how to integrate an Angular.js application with Node.js. At the moment, I have the following code in the file MY-PROJECT/public/js/controllers.js function LoginController( $scope ) { // fetch waiters var Waiter = require( ...

javascriptnode.jsexpressangularjs

Get a reference to pass as an injection into a child component using Vue js

Is there a way to pass a reference to child components? For example: The Parent component provides the ref: <template> <div ref="myRef" /> </template> <script> export default { name: 'SearchContainer', pr ...

javascriptvue.jsvuejs2

My AJAX call is meant for inserting data, and while the data does get inserted successfully, it strangely does not proceed to

I've been trying to troubleshoot my ajax code, but it doesn't seem to be going to the success function. function saveRecord() { $.ajax({ url: "admin.aspx/inserData", type: "POST", dataType: 'text', ...

jqueryajax

How to perfectly center a modal window/div vertically on an iPad

Currently, I am using a simple modal window script that functions well on various browsers, including the iPad. However, I have encountered an issue where the modal window appears at the top of the page on the iPad. This causes it to be out of view if the ...

jqueryipadmodal-dialog

Determine if a JSON object is void

Using jQuery, I am checking whether the object returned from an AJAX call is empty or not. In the first example, the AJAX call is successful and returns some data. console.log("obj before JSON parse:", response); var test = $.isEmptyObject(response); con ...

javascriptjqueryobject

Adjacent components

I have a query regarding the utilization of Angular. I aim to align the sentences side by side. These are two distinct components that I developed. I wish for recipe-list and recipes-details to function properly, with both statements displayed alongside ...

cssangular

Having Trouble with Jquery UI Date Picker?

I have included my form code below. <div class="threeleft second" id='displayallformshow' style="float: none;width: 80%;padding:10px;"> <form action="investor_submit.php"> <div class='formdiv'> ...

javascriptphpjqueryjquery-uidatepicker

Moving logic from the controller to the service in Node.js Express to streamline the code

Recently, I have been working on a project that involves fetching data from an API. To streamline the code and improve organization, I am looking to offload the program logic to a service, keeping my controller neat and tidy. I have been reading up on Asy ...

javascriptnode.jsexpressasync-await

Using SVG files in NextJS

I'm encountering an issue while trying to import an SVG file in a NextJS project. The error message I keep getting is: ./assets/aboutimg.svg 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, ...

javascriptreactjsnext.js

New programmer seeking to apply a dim effect to the entire photo while also adding a highlight when the image is hovered over

I am looking to add a special effect to my photos where they appear dimmed but highlighted when hovered over. Any guidance on how to achieve this would be greatly appreciated! The image is contained within a flexbox div that also contains a clickable lin ...

htmlcss

Inquiry regarding delays in updating and retrieving data with Mongoose in Node.js

I recently faced an issue related to the CRUD development process. Whenever I update a property and check the response in Postman, it always shows the previous data. For instance, after clicking send on Postman, it shows "weeks" : "11" instead of "10". Che ...

javascriptnode.jsmongodbmongoosepostman

Is there a way I can alter the font style of the word 'Logout'?

Hey, does anyone have a solution for changing the text color of "Logout!" to white? echo "Welcome, ".$_SESSION['username']."!<br><a href='logout.php'>Logout!"; <font color="#ffffff">your answer</font> ...

html

Rendering components before ComponentDidMount runs and Axios handles state updates

When I try to pass the gifs state to my GifList component in the render method, I encounter an issue. It seems that when trying to access the array within the component through props, it is returning as undefined. After investigating further, I noticed t ...

javascriptreactjs

Assigning a buffer to a createReadStream: A step-by-step guide

Based on the official documentation, createReadStream has the capability to accept a buffer type as the path argument. However, most Q&A resources only provide solutions on how to pass arguments as a string, rather than a buffer. How can I correctly set ...

javascriptnode.jstypescriptbufferfs

Sending "item" properties to the "Route" element

I am looking for a way to dynamically pass a list of route objects as props for the Route components in my AppRouter component. Currently, I have the routes defined like this: export const routes = [ { path: '/about', element: About, exact: tru ...

javascriptreactjsreact-routerreact-router-dom

Applying conditional logic within computed properties results in a failure to update

I have two different fiddles: Fiddle A and Fiddle B (both using Vuejs version 2.2.4) In my code, I have a computed property that can be changed programmatically by utilizing the get and set methods. Expectations for the Computed Property: If the def ...

javascriptvue.jsvuejs2

Having trouble with testing an Angular directive?

This is a snippet from my directive spec file for Angular 6. import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; import { TestBed, ComponentFixture, async } from '@angular/core/testing'; import { By } from ' ...

javascriptangularjasmine

jQuery plugin modifies keypress events

I have integrated the Jquery ImgAreaSelector plugin into my website. Within my site, I have implemented several keypress triggers using jquery. For example: $(document).bind('keypress', 'S', function(){ alert("You have pressed S key ...

javascriptjqueryhtml