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

您在回调函数 中指定的动画效果仅在初始动画完成后才会触发。这就是为什么您会看到这种效果。

DEMO