Question

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

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

以下是该项目当前版本的链接：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" alt="hand 1" style="left:239px;top:1410px;"/>

CSS

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

现在这种方式似乎有效，但我对此并不满意，但我还想为此功能添加更多功能。我想要实现的是，手指不可见，但是在您使用偏移量＃70; 70％＆＃39;滚动到该路点后淡入。并从那里开始动画。正如你所看到的，我以某种方式设法让动画工作，使用我在SO上找到的一些代码，但我还不满意，看起来我不能让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;"/>

所以有五个手指应该是动画的。我该如何结合这个功能？有什么想法吗？

Answer 1

组合动画更改

class="pageItem finger_1"至class="pageItem finger finger_1"

AND

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

Jquery Waypoints fadeIn和animate

1 个答案: