Javascript Jquery航路点fadeIn和动画

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

我正在一个单页滚动网站上工作，我已经使用jquery和waypoints实现了一些功能

以下是指向项目当前版本的链接：

如果你向下滚动到第一个大的厨房图像，在那里你有一个颜色改变功能，你会认出一个鼠标光标图标，在你滚动到它之后，它开始上下移动。我使用以下功能创建了带有航路点的函数：

JS:

现在，这似乎是可行的，但我并不满意，但我想添加一些更多的功能。我想实现的是，手指不可见，但在使用偏移量“70%”滚动到该航路点并从那里开始动画后，手指会淡入。 正如你所看到的，我设法让动画工作，使用了我在这里找到的一些代码，但我还不满意，看起来我无法让fadein工作

除此之外，如果你再滚动一点，我还需要对网站上的所有手指图像执行同样的操作

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

因此，有五个手指应该设置动画。如何组合该功能？

---

有什么想法吗？

合并动画更改

class=“pageItem finger\u 1”

至

class=“pageItem finger\u 1”

及

$（'.finger_1'）

至

$（'.finger'）

对于fadein效果，您可以尝试

$('.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%

。是的，这将是最终目标，当每个手指到达屏幕中央时，使手指分别淡入淡入淡入，例如，它会淡入并动画。非常感谢。我现在就试试看，如果行得通，我会告诉你的。你帮了大忙

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

$('.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();
    });
});