延迟jQuery切换Class效果，直到幻灯片动画完成

Delaying jQuery toggleClass effect until a slide animation has finished

本文关键字：幻灯片动画 jQuery 切换 Class 效果延迟更新时间：2023-09-26

我在使用jQueryDelay（）函数时遇到了一些问题。我目前正在使用它来尝试并强制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/

jQuery动画和效果具有回调函数，用于在它完成后进行的操作。

例如

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

试试这个：在这里摆弄

    $(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');
            };                                      
        });
    });