0

我在使用 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/jezzpin/KFeHd/6/

4

2 回答 2

1

jQuery 动画和效果具有回调函数，用于在完成后您想要发生的事情。

例如

var thisParent = $(this).parent();
$(this).closest('.history_record_container').find('.history_record_body').slideDown('slow',function() {
  $(thisParent).toggleClass('squared_bottom');
});
于 2013-09-04T11:55:40.587 回答
0

试试这个：小提琴在这里

    $(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');
            };                                      
        });
    });
于 2013-09-04T12:31:53.317 回答