Question

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

Slidesdown
Animate div

我希望首先发生类似动画的slideDown，当它完成时，再做一个动画。

注意：第一个 slideDown动画发生一次，而其余动画重新发生。即：点击其他标签。

p.s：我已经尝试进行回调但是由于我想要做第一次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;
    });

});

Answer 1

使用回调函数在滑动后调用另一个动画

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

jQuery .animate api reference

编辑：

  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
                });
            });            
        }
    }
  }

SlideDown一次*然后Animate取决于点击次数。

1 个答案: