gpt4 book ai didi

jquery - 重新调整动画链中的过渡速度

转载 作者:行者123 更新时间:2023-11-28 17:07:53 25 4
gpt4 key购买 nike

以下代码 (1) 将图像向下并向左移动,(2) 将其旋转 180 度,(3) 然后将其向右穿过屏幕。

jsFiddle here

请注意,当对象旋转时,动画过渡速度会减慢,因此它看起来像是在转动,而不仅仅是翻转。

问题是这会导致动画的第 3 部分也进行得非常缓慢......不再是爆炸,更像是莫西。

$('.moving_image').delay(7000).animate({
'left' : '18%',
'top' : '55%',
'width': '5vw'
},5500,function(){
$('.moving_image').css({'transform':'rotateY(180deg)','transition-duration':'2s'});
$('.moving_image').delay(2000).css({'transition-duration':'0s'}).animate({
'left' : '101%',
'top' : '50%',
'width': '15vw'
},200,'easeInExpo')
});

请注意第 7 行重新调整动画速度的尝试失败,并添加了以下代码段:

.delay(2000).css({'transition-duration':'0s'})

遗憾的是,它只是否定了之前的 2s 减速。

最佳答案

您可以使用额外的animate 函数来更改transition-duration: http://jsfiddle.net/mpsyLooo/4/

顺便说一句,我真的很推荐TimelineMaxCSS3 keyframes像这样的动画。

关于jquery - 重新调整动画链中的过渡速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29902335/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com