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

jQuery - How to apply .animate() and .show('slide') at the same time?

本文关键字：slide 何同时 show jQuery 应用 animate      更新时间：2023-09-26

在这个演示 http://jsfiddle.net/vHcXN 中，你可以看到你点击链接的wjen过渡开始。首先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);
     });
 });

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

$(".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中指定的动画效果仅在初始动画完成后才会触发。这就是为什么你会看到这种效果。

演示

由于您将函数作为参数传递到动画，因此它在动画完成后用作回调。 只需依次调用它们：

http://jsfiddle.net/wyE92/

$(".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);
});

请注意，它们不会完全同步，因为您向动画传递了不同的长度。

目前，.show('slide'...函数作为.animate({'left'...函数完成时的完整回调触发。删除回调并应用第一个下方的第二个动画：

$(".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);
});

这是您编辑的小提琴，一起显示新动画。请注意，由于时间长度不同，两个动画不会对齐。

相关文章：