jQuery toggle with multiple animations

Question

I have a site and when someone clicks the contact link, in the nav, a contact box appears and slides down. The nav then moves down to remain below the contact box (that just appeared). The issue is when you click the contact link again the toggle hides the contact box but leaves the nav down where it would be if the contact box was still visible. Here is the code:

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 ideas?

Why are the statements separated by commas ?

adeneo
– adeneo

2015-06-15 20:02:57 +00:00
Commented Jun 15, 2015 at 20:02 — adeneo
– adeneo, Commented Jun 15, 2015 at 20:02
Not sure. That is how the script came.

Joseph Manning
– Joseph Manning

2015-06-15 20:28:49 +00:00
Commented Jun 15, 2015 at 20:28 — Joseph Manning
– Joseph Manning, Commented Jun 15, 2015 at 20:28

Joseph Manning · Accepted Answer · 2015-06-17 04:14:47Z

1

I found the solution.

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;
    }
});

answered Jun 17, 2015 at 4:14

Joseph Manning

214 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cymen Over a year ago

Excellent -- you can probably use jQuery('.contact-bar-corner').is(':visible') instead of jQuery('.contact-bar-corner').css('display') == 'none' but that is a minor style thing. Sorry, I got a really bad cold and didn't get a chance to make a JSFiddle. I'm glad you figured it out.

Joseph Manning Over a year ago

I'm sorry to hear that. Thanks for the help.

Cymen · Accepted Answer · 2015-06-15 20:06:55Z

0

The problem is top: contactBar.height() will run before contactBar.toggle() has finished -- in fact, it will run almost right away. So instead, you need to move that into the toggle to get called when the toggle animation is finished:

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

Also, the lines should end with ; not , as the commenter mentions!

answered Jun 15, 2015 at 20:06

Cymen

14.5k4 gold badges58 silver badges77 bronze badges

4 Comments

Joseph Manning Over a year ago

It still remains there when I click it the second time. The contact box is disappearing but the nav is not returning to the top. I tried adding a second function and the same code but adding a -contactBar.height() but then the link stopped working.

Joseph Manning Over a year ago

Here is the code

contactBar.toggle(function(){     	navbarFixedTop.animate({ top: contactBar.height() }, 'slow'),         contactBar.animate({ top: '0' }, 'slow'),         stickyHeader.addClass('sticky'),         contactCorner.css('display', 'block'),    },function(){     navbarFixedTop.animate({ top: -contactBar.height() }, 'slow'),         contactBar.animate({ top: '0' }, 'slow'),         stickyHeader.removeClass('sticky'),         contactCorner.css('display', 'none'),   });

Cymen Over a year ago

@JosephManning Hrm, I think we need a JSFiddle as there is too much going on -- I suspect you need to keep track of the original top value and put that back in when toggle is closing.

Joseph Manning Over a year ago

The js has a close option of

function contact_close() {         contactBar.animate({ top: -contactBar.height() }, 'slow');         contactCorner.css('display', 'none');     }

I apologize I've never used jsfiddle and am having a hard time getting this site to work.

Collectives™ on Stack Overflow

jQuery toggle with multiple animations

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related