0

jQuery の delay() 関数に問題があります。現在、divの1つでslideUpアニメーションが完了するまでtoggleClassアクションを強制的に待機させるために使用していますが、機能していないようです。

私のスタイルは、バーが実際にコンテンツを表示するために拡張されたかのように見えるように、クリックすると拡大して下部のバーの丸い角が四角になり、さらにコンテンツを表示するために丸みを帯びた角を持つバーを持つことを目指しています。これは問題なく機能しますが、展開を折りたたむと、折りたたみアニメーションが完了した後、バーの下部の角が丸くなるように戻る必要があります。現時点では、このアニメーションが完了する前に発火するようです。

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/

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 に答える