-1

私のコードは現在、両方のアニメーションを同時に実行しています。

  • スライドダウン
  • divをアニメーション化

スライドダウンのようなアニメーションが最初に発生し、完了したら別のアニメーションを実行したいと思います。

注: 最初のslideDown アニメーションは 1 回発生し、残りのアニメーションは繰り返し発生します。つまり、他のタグをクリックします。

ps:コールバックを実行しようとしましたが、最初のslideDownアニメーションを1回実行したいため、残りのコードが機能しなくなります。

適切なデモについては、jsFiddle DEMOを参照してください。

前もって感謝します！

以下の私のコードを見てください。参考までにコメントさせていただきました。

$(function() {
    var content = $('#content'),
        contentHeight = content.height(),
        nav = $('#nav'),
        count = 0;

    // on load content height is shorter
    content.height(100);

    nav.find('a').on('click', function() {

        var $this = $(this),
            parent =  $this.parent(),
            targetElement = $this.attr('href');

        //Does the slide down animation once        
        if (count === 0) {
            content.animate({'height': contentHeight });
            count = 1;
        }

        //only add active class if parent does not have it and then animate it
        if ( !parent.hasClass('active') ) {

            parent.addClass('active');

            //animate in
            $(targetElement).animate({
                left: '-=200px',
                'margin-left': '50%',
                opacity: 1
            }, 500);

            //Gets older clicked element
            var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');

            //only if old click element exists the do the animation
            if (oldClickedElement) {
                //animate out + reset to start
                $(oldClickedElement).animate({
                    left: 0,
                    'margin-left': '-50%',
                     opacity: 0
                }, 500, function() {
                     $(oldClickedElement).css({
                        'margin-left' : '100%',
                        left: 0
                    });
                });            
            }
        } 

        return false;
    });

});
4

1 に答える 1

1

コールバック関数を使用して、スライドダウン後に他のアニメーションを呼び出します

content.animate({'height': contentHeight },function() {
   //do other animation here, this function is called after the slidedown is finished.
});

jQuery .animate API リファレンス

編集：

  if (count === 0) {
        content.animate({'height': contentHeight },function(){
           //Do only the animation code here
        });
        count = 1;
    } else {

    //only add active class if parent does not have it and then animate it
    if ( !parent.hasClass('active') ) {

        parent.addClass('active');

        //animate in
        $(targetElement).animate({
            left: '-=200px',
            'margin-left': '50%',
            opacity: 1
        }, 500);

        //Gets older clicked element
        var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');

        //only if old click element exists the do the animation
        if (oldClickedElement) {
            //animate out + reset to start
            $(oldClickedElement).animate({
                left: 0,
                'margin-left': '-50%',
                 opacity: 0
            }, 500, function() {
                 $(oldClickedElement).css({
                    'margin-left' : '100%',
                    left: 0
                });
            });            
        }
    }
  }
于 2013-07-25T18:29:41.823 に答える