Question

我遇到了jQuery delay（）函数的一些问题。我正在使用它来尝试强制一个toggleClass动作，等到我的一个div上的slideUp动画完成，但它似乎没有工作。

我的风格旨在拥有一个带圆角的条形，当点击时会展开以显示更多内容，底部条形的圆角变成方形，看起来好像条形实际上已展开以显示内容。这很好，但是当它折叠扩展时，条形图需要在折叠动画完成后返回到底部有圆角。目前它似乎在这个动画完成之前就开火了。

我在网上看到，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');
            };                                      
        });
    });

延迟jQuery toggleClass效果，直到幻灯片动画结束

2 个答案: