CODEWITHSUNDEEP
javascriptjqueryanimation
James Ives
James Ives

Reputation: 3365

Show animation is not animating

I'm working on a function that hides, shows and replaces an element using an AJAX call. Everything works perfectly, it animates the closing but for some reason will not reanimate when it opens back up, it just appears. It's a rather long script, so this is important stuff:

 // This is the first part which is executed.
 var bar = $("#bar");

 // This is what happens when the bar is closes and works.

 if (!supressed) {
     bar.animate({height:0});
     bar.parent().animate({height:0}, function() {
         $(this).hide()
     });
 } else {
     // The bar is replaced with an identical div with the same id.
     bar.replaceWith(newBar);
     if (supressed) {
         // When the bar needs to appear again it runs the updateBar function.
        updateBar(true);
     }
}

And then here's the updateBar function. The #bar div just appears but will not animate into view. I've tried switching the order of the animation calls but neither seem to do the trick.

function updateBar(reload) {
    // Reassigns the variable
    var bar = $("#bar");

    if (reload === true) {

        // This is where things go wrong.
        bar.animate({height:"45px"});
        bar.parent().animate({height:"45px"}, function() {
            $(this).show();
        });
    }
}

JSFiddle: https://jsfiddle.net/1p80peqq/3/

Any suggestions?

Upvotes: 0

Views: 68

Answers (3)

daGUY
daGUY

Reputation: 28753

Calling $(this).hide() on the bar's parent sets its display property to none. Therefore, when you call updateBar() to animate the bar and its parent back into place, the parent remains hidden until after the animation completes and you call $(this).show().

So in updateBar(), just call bar.parent().show() before you start the animation.

Updated fiddle: https://jsfiddle.net/1p80peqq/6/

Upvotes: 1

Frank Fajardo
Frank Fajardo

Reputation: 7359

The problem with your original script, as per your fiddle is that you are animating the height of the parent whilst it is hidden. Then you show it after the animation completes. So the height animation is not visible. You can tell this by inserting console.log($(this).css('display')); just before you show the parent. The console will display none.

I'm not sure why you also want to animate the parent. If you only want to hide/show the bar, you could do this:

function reloadBar() {
    var $bar = $("#bar");
    var $newBar = $("#new-bar");
    $bar.replaceWith($newBar);
    if ($("#click").hasClass("clicked")) {
        $newBar.animate({ height: 0 })
    } else {
        $newBar.animate({ height: '45px' });
    }
}

Alternatively, you could change your reload() function to show the parent first before animating the height, like this:

function reload(option) {
    var $bar = $("#new-bar");
    if (option === true) {
        $bar.animate({
            height: "45px"
        });
        $bar.parent().show().animate({
            height: "45px"
        });
    }
 }

But there is redundancy in the above in that the animation of $bar does not make sense, since $bar is not visible (ie, $bars's parent has display: none). So you could remove that completely like this:

function reload(option) {
    var $bar = $("#new-bar");       
    if (option === true) {
        $bar.css({ height: "45px" });
        $bar.parent().show().animate({
            height: "45px"
        });
    }
 }

Or you could simply animate the bar's height and leave the parent as is, like what I did earlier.

Upvotes: 1

James Ives
James Ives

Reputation: 3365

I was able to solve this issue by hiding the parent of the bar before it's set to show. Like so:

bar.animate({height:"45px"});
bar.parent().animate({height:"45px"}, function() {
    $(this).hide.show("slow");
});

Upvotes: 0

Related Questions