[英]Jquery Waypoints fadeIn and animate
I am currently working on a project that needs a few jquery functions which seem to be too complex to build for me, so I hope anyone here might have some solutions for me. 我目前正在开发一个需要几个jquery函数的项目,这些函数对于我来说似乎太复杂了,因此我希望这里的任何人都可以为我找到一些解决方案。
I am working on a one page scroll site and I already impleneted some functions using jquery and waypoints. 我正在一个页面滚动站点上工作,并且已经使用jquery和Waypoint实现了一些功能。
Here is the link to the current version of the project: http://art-design.de/onlineprospekt/demo/ 这是项目当前版本的链接: http : //art-design.de/onlineprospekt/demo/
If you scroll down a bit to the first big kitchen image, where you have a color change function underneath, you will recognize a mouse-cursor icon that starts to move up and down after you scroll to it. 如果向下滚动到第一张大厨房图像,该图像在下面具有变色功能,您将识别出一个鼠标光标图标,在滚动到该图标后它会开始上下移动。 I created this function with waypoints with the following function: 我使用以下功能通过航路点创建了此功能:
JS: 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 HTML
<img class="pageItem finger_1" src="assets/images/item_18171.png" alt="hand 1" style="left:239px;top:1410px;"/>
CSS CSS
.pageItem {
box-sizing: border-box;
display: block;
height: auto !important;
width: auto !important;}
Now this kinda seems to work, but I am not satisfied with it, yet and I would like to add some more to this function. 现在这种方法似乎可行,但是我对此并不满意,但是我想在此功能中添加更多内容。 What I would like to achieve is, that the finger is not visible, but fades in after you scroll to that waypoint with offset '70%' and starts the animation from there as well. 我想要实现的是,手指不可见,但是在您以偏移“ 70%”滚动到该路点并从那里开始动画之后淡入。 As you can see, I somehow managed to get the animation to work, using some code that I found here on SO, but I am not satisfied yet and it looks like I can't get the fadein to work. 如您所见,我使用在SO上找到的一些代码设法以某种方式使动画起作用,但是我还不满意,而且看来我无法使Fadein起作用。
And in addition to all that, I need to do this do the same for all the finger images that are on the site if you scroll a bit further 除此之外,如果您进一步滚动一点,我需要对站点上的所有手指图像执行相同的操作
<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;"/>
So there are five fingers that should be animated. 因此,应该激活五个手指。 How can I combine the function? 如何合并功能? Any ideas? 有任何想法吗?
to combine the animation change 结合动画变化
class="pageItem finger_1"
to class="pageItem finger finger_1"
class="pageItem finger_1"
到class="pageItem finger finger_1"
AND 和
$('.finger_1')
to $('.finger')
$('.finger_1')
到$('.finger')
For fadein effect you can try, 对于淡入效果,您可以尝试,
$('.finger').fadeOut();
$('.finger').waypoint(function() {
$('.finger').fadeIn();
setInterval(function(){
$('.finger').animate({ top: '-=12px' }, 500);
$('.finger').animate({ top: '+=12px' }, 500);
}, 1300);
}, {offset: '70%', triggerOnce: true });
Update 更新
$(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();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.