gpt4 book ai didi

javascript - 为 jQuery 中的多个元素平滑地链接动画

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:18:49 27 4
gpt4 key购买 nike

我正在尝试通过使用 jQuery 为多个堆叠图像按顺序设置动画来重新创建 map 的放大效果,以实现跨域目的。

到目前为止,我通过为每个图像使用延迟和两个单个动画(A 和 B 日志)对动画进行排队,以便通过缩放在图像之间生成平滑过渡,并在下一个图像上淡入淡出,从而取得了一些成就。

$('img:not(:last-child)') /* All images but farest zoom */
.reverse() /* From last to first */
.each(function (index) {
$(this).css( /* From half size… */ {
'width': 584,
'height': 336,
'margin-left': -292,
'margin-top': -168
});
$(this).delay(index * 300).animate( /* …to actual size */ {
'width': 1168,
'height': 673,
'margin-left': -584,
'margin-top': -336
}, {
duration: 300,
easing: 'linear',
done: function () {
console.log('A:', index, new Date().getTime() - timestamp);
}
});
});
$('img:not(:first-child)') /* All images but closest zoom */
.reverse() /* From last to first */
.each(function (index) {
$(this).animate( /* Animate to double size */ {
'width': 2336,
'height': 1346,
'margin-left': -1168,
'margin-top': -673,
'opacity': 0
}, {
duration: 300,
easing: 'linear',
done: function () {
console.log('B:', index, new Date().getTime() - timestamp);
$(this).remove(); /* Remove the elment once completed */
}
});
});

众所周知,jQuery 不支持在单个队列中为不同的 DOM 元素排队动画,这导致了这个复杂的解决方案。

check this Fiddle .

正如您将看到的,一旦图像完全加载并且您在 map 中单击,动画队列就会启动。但它远非完美。 过渡一点也不流畅,导致动画之间有一点停顿,从而破坏了结果。我已经尝试了几个小时的一切,玩弄超时,重新思考算法,强制线性转换,但没有结果。

我的主要目标是实现流畅的动画,然后为整个动画重新创建全局缓动效果,如“摆动”,逐渐加速为中间图像是动画的。

最佳答案

所以我花了最后几个小时弄清楚这里有什么黑客,这是你应该注入(inject)的代码

jQuery.easing = {
zoom: function( p ) {
return (3*p + Math.pow( p, 2 ))/4;
}
};

之后,您可以在代码中使用 easing: 'zoom'

非常可笑的是,在 jQuery UI 中有 32 种不同的缓动,但没有任何东西可以缩放!!!

关于javascript - 为 jQuery 中的多个元素平滑地链接动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17588475/

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