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函数。 #bar 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

根据您的fiddle原始脚本的问题在于，您隐藏了父级的高度。然后在动画完成后显示它。因此高度动画不可见。您可以在显示父级之前插入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

在条形图的父级上调用$(this).hide()会将其display属性设置为none。因此，当您致电updateBar()以将条形图及其父级动画回原位时，父级将保持隐藏状态，直到动画完成后您调用$(this).show()。

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

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

Answer 3

我能够通过在设置为show之前隐藏栏的父级来解决此问题。像这样：

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

显示动画不是动画

3 个答案: