Показать анимацию не анимацию

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 не отображается (то есть, у родителя есть 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.animate({height:"45px"}); 
bar.parent().animate({height:"45px"}, function() { 
    $(this).hide.show("slow"); 
}); 

Answer 3

Вызов $(this).hide() на родителях бара устанавливает его display на none. Поэтому, когда вы вызываете updateBar(), чтобы анимировать планку и ее родителя на место, родитель остается скрытым до после анимация завершается, и вы вызываете $(this).show().

Так в updateBar(), просто позвоните bar.parent().show()до вы начинаете анимацию.

Обновлено скрипку: https://jsfiddle.net/1p80peqq/6/