Задержка jQuery toggleClass до завершения анимации слайда

Question

У меня возникли проблемы с функцией jQuery delay(). В настоящее время я использую его, чтобы попытаться заставить действие toggleClass подождать, пока анимация slideUp не завершится на одном из моих div, однако она не работает.

Мой стиль направлен на наличие полосы с закругленными углами, которая при щелчке расширяется, чтобы выявить дополнительное содержимое, когда круглые углы бара внизу становятся квадратами, чтобы выглядеть так, как будто панель фактически расширилась, чтобы показать содержимое. Это хорошо, и это работает, однако, когда я разрушаю расширение, бар должен вернуться к округленным углам внизу после завершения анимации коллапса. На данный момент он, кажется, срабатывает до завершения этой анимации.

Я читал где-то в Интернете, что «медленная» скорость перехода jQuery составляет 600 миллисекунд, чтобы установить задержку на 800, чтобы убедиться, что она в стороне, но опять-таки это на самом деле ничего не делало.

Любые предложения? Код и скрипку ниже:

$(function() { 
     $('span.history_record_toggle').click(function() { 
      if($(this).hasClass('collapsed')){ 
       $(this).text('Show +'); 
       $(this).toggleClass('collapsed'); 
       $(this) 
        .closest('.history_record_container') 
        .find('.history_record_body') 
        .slideUp('slow',function() { 
       }); 
       $(this) 
        .parent() 
        .toggleClass('squared_bottom'); 
      }else{ 
       $(this).text('Hide -'); 
       $(this).toggleClass('collapsed'); 
       $(this) 
        .closest('.history_record_container') 
        .find('.history_record_body') 
        .slideDown('slow',function() { 
       }); 
       $(this) 
        .parent() 
        .delay(800) 
        .toggleClass('squared_bottom'); 
      };          
     }); 
    }); 

http://jsfiddle.net/jezzipin/KFeHd/6/

Answer 1

JQuery анимации и эффекты имеют функции обратного вызова для того, что вы хотите, чтобы это произошло после того, как он закончится.

E.g.

var thisParent = $(this).parent(); 
$(this).closest('.history_record_container').find('.history_record_body').slideDown('slow',function() { 
    $(thisParent).toggleClass('squared_bottom'); 
}); 

Answer 2

Попробуйте это: Fiddle here

$(function() { 
     $('span.history_record_toggle').click(function() { 
      $zis = $(this); 
      if($zis.hasClass('collapsed')){ 
       $zis.text('Show +') 
       .removeClass('collapsed') 
       .closest('.history_record_container') 
       .find('.history_record_body') 
       .slideUp('slow',function() { 
        $zis.parent().removeClass('squared_bottom'); 
       }); 
       $zis.parent().addClass('squared_bottom'); 
      }else{ 
       $zis.text('Hide -') 
       .addClass('collapsed') 
       .closest('.history_record_container') 
       .find('.history_record_body') 
       .slideDown('slow',function() { 
       }); 
       $zis.parent().addClass('squared_bottom'); 
      };          
     }); 
    });