在这个演示中 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);
});
});
最佳答案
从第一个动画的回调中移除第二个动画,
$(".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
关于javascript - jQuery - 如何同时应用 .animate() 和 .show ('slide' )?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20667047/