jQuery - 如何同时应用.animate()和.show('slide')？

Question

在这个演示http://jsfiddle.net/vHcXN中,您可以看到,如果您点击链接开始转换.首先div高度改变然后滑动效果.

我怎样才能同时制作这两部作品？

 $(".turn_next").click(function(){
     $(".box2").hide();
     $(".box1_content").animate({height:'300px'}, 300,function(){
         $(".box3").show('slide', {direction: 'right'}, 500);
     });
 });

 $(".turn_back").click(function(){
     $(".box3").hide();
     $(".box1_content").animate({height:'100px'}, 300,function(){
         $(".box2").show('slide', {direction: 'left'}, 500);
     });
 });

Answer 1

从第一个动画的回调中删除第二个动画,

$(".turn_next").click(function(){
    $(".box2").hide();
    $(".box1_content").animate({height:'300px'}, 300);
    $(".box3").show('slide', {direction: 'right'}, 500);
 });

 $(".turn_back").click(function(){
    $(".box3").hide();
    $(".box1_content").animate({height:'100px'}, 300);
    $(".box2").show('slide', {direction: 'left'}, 500);
 });

您在call back function仅在初始动画完成后才会触发的动画效果.这就是你看到这种效果的原因.

DEMO