-1

我的代码目前同时执行两个动画。

  • 向下滑动
  • 动画 div

我希望先出现像 slideDown 这样的动画，完成后，再做一个动画。

注意：第一个slideDown 动画出现一次，而其余动画则重复出现。即：点击其他标签。

ps：我已经尝试过回调，但由于我想做第一个slideDown动画一次，它会阻止我剩余的​​代码工作。

请参阅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 回答