gpt4 book ai didi

jquery - 如何在用户滚动到 N 点后触发动画 - 具有多个动画的 jQuery 路点 .animate()

转载 作者:可可西里 更新时间:2023-11-01 13:13:11 25 4
gpt4 key购买 nike

我需要你的帮助!

基本思路:我希望当用户滚动到一个点时(在页面中间 - 假设它距离顶部 500 像素)然后我们有一些动画,当然我不会问如何做所有的动画工作,但我需要你给我关于回调的基本概念

我的意思是回调:在第一个动画之后,我们得到第二个动画,然后是第三个动画。我该如何处理?

场景:

  • 假设我们有 4 个盒子,它们有红色、蓝色、橙色和粉色。
  • 用户从顶部滚动到 500 像素后 - 我想要第一个红色框淡入
  • 2 秒后,我希望红色框淡出,蓝色框淡入。
  • 在我最初的想法中,我将需要它们旋转或其他一些动画 - 如果你也能做到这一点那就太棒了:),如果你认为我要求太多请忽略这一点

工具:

+1 以获得正确的解决方案,因为我一直很欣赏所有的解决方案,所以如果可行的话,我会投赞成票:)

谢谢!

最佳答案

我正在使用 jQuery 航路点。

当相关元素完全可见时,这将被触发,这意味着它的底部在视口(viewport)底部之上:

$('.red_box').waypoint(function(direction){
$('.red_box').fadeIn();
window.setTimeout(animateBlue, 2000);
},{offset: 'bottom-in-view'});

动画开始,在动画期间计时器启动,两秒后将调用指定的函数。

function animateBlue(){
$('.red_box').fadeOut(function(){
$('.blue_box').fadeIn();
});
window.setTimeout(animatePink, 2000);
}

function animatePink(){
$('.blue_box').fadeOut(function(){
$('.pink_box').fadeIn();
});
}

红色框淡出,当动画完成时蓝色框淡入。

要获得更多动画,您可以使用更多航路点或在特定时间后使用另一个调用。有关淡入淡出功能的 api 的帮助,请参阅
http://api.jquery.com/category/effects/fading/
(你可能知道)

当然,您可以调整动画开始的时间和时间。
我不确定您是否希望在动画完成后两秒开始。而且我也不确定红色和蓝色是否应该同时淡出和淡入。

对于旋转:
http://javascriptisawesome.blogspot.de/2011/09/jquery-css-rotate-and-animate-rotation.html

关于jquery - 如何在用户滚动到 N 点后触发动画 - 具有多个动画的 jQuery 路点 .animate(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16341077/

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