jQuery: How can I fade in the navigation only after the div expands?

Question

I have a menu button that toggles the header bar at the top of my page. How can I make all of the contents of the div (.logo and .nav) fade in/appear only after the header div has finished expanding? Otherwise you can see the nav/logo elements rearranging themselves while the header div expands.

A fiddle to illustrate: http://jsfiddle.net/L9cKt/3/

I'm thinking there is a way to delay the display: none; for the .logo and .nav classes until a certain time after the click event.

Thanks ahead of time!

You have a CSS transition which takes half a second. jQuery doesn't know about it. — Shomz, Mar 23 '14 at 22:03
possible duplicate of [jquery function on toggleClass complete?](http://stackoverflow.com/questions/10321393/jquery-function-on-toggleclass-complete) — Drew Chapin, Mar 23 '14 at 22:21
`addEventListener("transitionend"` .. https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend — Rob Sedgwick, Mar 23 '14 at 22:23
@Shomz - the transition is for the menu to shrink when the user scrolls down. — spops, Mar 29 '14 at 20:31
@druciferre not quite unfortunately, since the content I want to fade in is part of the `tiny` class that I am toggling, not a part of a function I'd like to execute next.. — spops, Mar 29 '14 at 20:53

Hampus Brynolf · Answer 1 · 2014-03-23T22:18:09.243

1

You should use chaining:

$(document).ready(function(){
    $('.menu').click(function () {
        $('#header a').fadeToggle("slow", function() {
          $('#header').toggleClass('tiny');
        } );
    });
});

(i've added a timeout for the fadein - plz see http://jsfiddle.net/f3yLg/)

edited Mar 23 '14 at 22:18

answered Mar 23 '14 at 22:05

Hampus Brynolf

1,296
11
20

As mentioned by @Shomz above - you are using a css-transition that jquery doens't know about. – Hampus Brynolf Mar 23 '14 at 22:12
@HampusBrynolf can you make the menu size change first, then fade the a? – spops Mar 29 '14 at 19:51

Wilmer · Accepted Answer · 2014-03-28T18:30:43.033

1

Since you can't handle css transitions via jQuery you can try mimic the same behaviour using jQuery's own animate():

$(document).ready(function () {
    $('.menu').click(function () {
        if ($('#header').is(".tiny")) {
            $('#header').animate({
                width: "100%",
                height: "100px",
                padding: "30px"
            }, 500, function () {
                $('#header').removeClass("tiny").find("a").fadeIn();
            });


        } else {
            $('#header').addClass("tiny").find("a").hide();
            $('#header').animate({
                width: "50px",
                height: "50px",
                padding: "5px"
            }, 500);
        }

    });
});

WORKING DEMO

UPDATE: Fade in inner content, use contents()

$('#header').removeClass("tiny").contents().fadeIn();

DOCUMENTATION

edited Mar 28 '14 at 18:30

answered Mar 23 '14 at 22:46

Wilmer

2,511
1
14
8

This is perfect, thanks. It was a bit of an awkward problem but this is a good fix. – spops Mar 28 '14 at 18:12
How can I ensure that all the content within the header fades in, not just `a` (from this line `$('#header').removeClass("tiny").find("a").fadeIn();` ) ? I think ultimately I'll change the logo to an `a` itself, but since I'm not good at jQuery, how would I tell jQuery to fade in something else as well? – spops Mar 28 '14 at 18:13
another question.. I want the menu to be tiny when the user scrolls down, and currently have this in my code: `$(window).scroll(function () { if ($(document).scrollTop() <= 10) { $('#header').removeClass('tiny'); } else { $('#header').addClass('tiny'); } });` How can I couple this with your solution? – spops Mar 29 '14 at 20:11
You can reuse the function inside click move it to a different place and pass a parameter. – Wilmer Mar 29 '14 at 21:51

Rob Sedgwick · Answer 3 · 2014-03-23T22:20:38.070

Yeah, css transistions and animate are great, but we want to trigger js - maybe a case to stick with .animate();

One way ( more convention but not 100% accurate / browser may not be chirpy enough to match these times up )

After the toggleClass command we can set a timeout to match our CSS transition time.

$("#somediv").toggleClass("csswithtransition");
var timer = setTimeout(function() {  $("#something").hide(); },500);
/* 500 ms being the css transition time */

Another , we have a few events to look for, but we need all the prefixes:

-webkitTransitionEnd
otransitionend
oTransitionEnd
msTransitionEnd
transitionend

-

$("#somediv").toggleClass("tiny").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
  function(e) {

      $("#something").hide();

});

Give these a try

* use `.one()` for these rather than `.on` as `.one` is throwaway and will not hang around — Rob Sedgwick, Mar 23 '14 at 22:31

jQuery: How can I fade in the navigation only after the div expands?

3 Answers3