显示动画不是动画

Question

我正在处理一个使用AJAX调用隐藏、显示和替换元素的函数。一切运作完美，它动画关闭，但由于某些原因，不会重新激活，当它打开，它只是出现。这是一个相当长的脚本，所以这是很重要的东西：

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

然后是updateBar函数。#栏div只是出现，但不会动画进入视图。我尝试过改变动画调用的顺序，但这两种方法似乎都没有效果。

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/

有什么建议吗？

Answer 1

您的原始脚本的问题，根据您的小提琴是，您是动画的高度的父母，而它是隐藏的。然后在动画完成后显示出来。因此高度动画是不可见的。您可以在显示父级之前插入console.log($(this).css('display'));来判断这一点。控制台将显示none。

我不知道你为什么还想给父母动画。如果只想隐藏/显示条形图，可以这样做：

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

或者，您可以更改您的reload()函数，以便在绘制高度之前首先显示父函数，如下所示：

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

但是上面有冗余，因为$bar的动画没有意义，因为$bar是不可见的(即$bars的父母有display: none)。

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

或者，您可以简单地动画酒吧的高度，离开父母的原样，就像我之前做的。

Answer 2

在bar的父节点上调用$(this).hide()将其display属性设置为none。因此，当您调用updateBar()使条形条及其父块恢复原样时，父控件将一直隐藏到动画完成后，然后调用$(this).show()。

所以在updateBar()中，只需在启动动画之前调用bar.parent().show()即可。

更新小提琴：https://jsfiddle.net/1p80peqq/6/

Answer 3

我能够通过在条形图设置显示之前隐藏它的父级来解决这个问题。就像这样：

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