javascript - 延迟 jQuery toggleClass 效果直到幻灯片动画完成

Question

我在使用 jQuery delay() 函数时遇到了一些问题。 我目前正在使用它来尝试强制执行 toggleClass 操作，直到 slideUp 动画在我的一个 div 上完成，但它似乎不起作用。

我的风格旨在拥有一个带圆 Angular 的栏，当单击时展开以显示更多内容，底部的栏的圆 Angular 变成方形，看起来栏实际上已经展开以显示内容。这很好，但是它可以工作，当我折叠展开时，在折叠动画完成后，栏需要回到底部的圆 Angular 。目前它似乎在此动画完成之前触发。

我在网上某处读到 jQuery 的“慢”转换速度为 600 毫秒，我将延迟设置为 800 以确保它不碍事，但这实际上并没有做任何事情。

有什么建议吗？下面的代码和 fiddle :

$(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 动画和效果具有回调函数，可以实现完成后发生的事情。

例如

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