Jquery Waypoints 淡入和动画

Posted 2023-05-08

【中文标题】Jquery Waypoints 淡入和动画

【英文标题】：Jquery Waypoints fadeIn and animate

【发布时间】：2014-10-07 19:37:47

【问题描述】：

我目前正在做一个需要一些 jquery 函数的项目，这些函数对我来说似乎太复杂了，所以我希望这里的任何人都可以为我提供一些解决方案。

我正在开发一个单页滚动网站，并且已经使用 jquery 和航点实现了一些功能。

这里是项目当前版本的链接：http://art-design.de/onlineprospekt/demo/

如果您向下滚动到第一个大厨房图像，在该图像下方有一个颜色更改功能，您会识别出一个鼠标光标图标，该图标在您滚动到该图标后开始上下移动。我使用具有以下功能的航点创建了此功能：

JS：

<!--Moving finger waypoints start -->

<script type="text/javascript">
$(document).ready(function() 
    $('.finger_1').waypoint(function() 
        setInterval(function()
            $('.finger_1').animate( top: '-=12px' , 500);
            $('.finger_1').animate( top: '+=12px' , 500);
        , 1300);
    , offset: '70%',  triggerOnce: true );
);
</script>

<!--Moving fingers waypoints end -->

html

<img class="pageItem finger_1" src="assets/images/item_18171.png"  style="left:239px;top:1410px;"/>

CSS

.pageItem 
box-sizing: border-box;
display: block;
height: auto !important;
width: auto !important;

现在这种方法似乎可行，但我对它并不满意，我还想为这个功能添加更多内容。我想要实现的是，手指不可见，但在您滚动到偏移量为“70%”的那个航路点后淡入淡出，并从那里开始动画。 正如你所看到的，我以某种方式设法让动画工作，使用我在 SO 上找到的一些代码，但我还不满意，看起来我无法让淡入淡出工作。

除此之外，如果您进一步滚动，我需要对网站上的所有手指图像执行相同操作

<img class="pageItem finger_1" src="assets/images/item_18171.png"  style="left:239px;top:1410px;"/>
<img class="pageItem finger_2" src="assets/images/item_18171.png"  style="left:703px;top:1440px;"/>
<img class="pageItem finger_3" src="assets/images/item_18171.png"  style="left:408px;top:2641px;"/>
<img class="pageItem finger_4" src="assets/images/item_18171.png"  style="left:438px;top:3371px;"/>
<img class="pageItem finger_5" src="assets/images/item_18171.png"  style="left:643px;top:4433px;"/>

所以应该有五个手指动画。如何组合功能？ 有什么想法吗？

【参考方案1】：

结合动画变化

class="pageItem finger_1" 到 class="pageItem finger finger_1"

与

$('.finger_1') 到 $('.finger')

淡入淡出效果你可以试试，

$('.finger').fadeOut();
$('.finger').waypoint(function() 
    $('.finger').fadeIn();
    setInterval(function()
        $('.finger').animate( top: '-=12px' , 500);
        $('.finger').animate( top: '+=12px' , 500);
    , 1300);
, offset: '70%',  triggerOnce: true );

更新

$(window).load(function()
    $('.finger').each(function()
        $(this).waypoint(function() 
            $(this).fadeIn();
            setInterval(function(elem)
                elem.animate( top: '-=12px' , 500);
                elem.animate( top: '+=12px' , 500);
            , 1300,$(this));
        , offset: "70%", triggerOnce: true ).fadeOut();
    );
);

【讨论】：

非常感谢您的努力。我用你的代码更新了网站，但它看起来不像我想要的那样工作。现在似乎动画在文件加载时同时为所有手指触发，但不是在航点上，我看不到和淡入。

你的意思是offset: '70%'每个手指应该不同吗？

fadeIn 在本地为我工作，如果您看不到这个，请将偏移量从 70% 更改为 72% 或 75%。

是的，这将是最终目标，让手指分别在每个手指到达屏幕中间时分别淡入，例如它淡入并设置动画。

非常感谢。我现在就试试，如果有效，请告诉你。你帮了大忙