jQuery Waypoint-具有相同CLASS的多个div [英] jQuery Waypoints - multiple divs with same CLASS

问题描述

我已按照本教程进行操作: http://spin .atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/成功.我想在页面上的几乎每个元素上应用渐变.这意味着使用该jQuery方法，我将为每个元素创建单独的类并复制代码，因为否则，当前具有相同类的每个元素仅在第一个Waypoint处淡入.

I have followed this tutorial: http://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/ successfully. I would like to apply the fadein on almost every element on the page. This means using this jQuery method that I would ned to create separate Classes for each element and duplicate the code, because otherwise every element with the same class currently fades in with the first Waypoint only.

这就是我所拥有的:

// hide our element on page load
$('.fade-in').css('opacity', 0);

$('.fade-in').waypoint(function() {
$('.fade-in').addClass('fadeInUp');
}, { offset: '95%' });

通过关注此页面，我尝试将其调整为:

By following this page, I tried to adapt it to have:

但是我无法使它工作……有什么想法吗? (我的Jquery可能会关闭)

But I couldn't get it to work...any ideas please? (My Jquery could well be a bit off)

// hide our element on page load
$('.fade-in').css('opacity', 0);

var sticky = [];
$('.fade-in').each(function(idx){
sticky[idx] = new Waypoint.Sticky({ element: this });
$({element: this}).addClass('fadeInUp');
});

我也不确定如何添加偏移量部分.

I'm also not sure how to add in the offset part.

非常感谢

推荐答案

我不确定我是否可以遵循上面的代码，但是我认为我理解您正在尝试实现的目标，并且我做了类似的事情.

I am not sure i can follow your code above, but i think i understand what you are trying to achieve and i did something similar.

使用路标向元素添加类，并让CSS处理过渡或动画.

Use waypoints to add a class to the elements and have CSS handle the transition or animation.

这假定您使用的是航路点的jquery版本.

This assumes you are using the jquery version of waypoints.

site.js

$(document).ready(function(){
    //set a waypoint for all the page parts on the page
    var ppWaypoint = $('.pp').waypoint(function(direction) {
        //check the direction
        if(direction == 'down') {
            //add the class to start the animation
            $(this.element).addClass('show');
            //then destroy this waypoint, we don't need it anymore
            this.destroy();
        }
    }, {
        //Set the offset
        offset: '80%'
    });
});

您的CSS可以做您真正喜欢的任何事情，假设您只想淡入元素

Your CSS can do whatever you like really, let's assume you just want to fade in the elements

style.css

.pp {
    transition-property: opacity;
    transition-duration: 0.8s;
    opacity: 0;
}
.pp.show {
    opacity: 1;
}

这里的CSS非常简单；只需将元素的不透明度默认情况下设置为0，并在添加show类时将不透明度更改为1.transition属性和持续时间将使此过程变得顺畅流畅.

The CSS is pretty simple here; just have the opacity of the element set to 0 by default, and when the class of show is added, the opacity is changed to 1. The transition property and duration will make this happen nice and smooth.

只需稍微改变一下CSS，就可以使它向上滑动以及渐入渐出；

For something a little cooler, you could make it slide up as well as fade in, just by changing your CSS a little;

.pp {
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  opacity: 0;
  transform: translateY(5px);
}
.pp.show {
  transform: translateY(0px);
  opacity: 1;
}

我在这里所做的就是添加transform transformY属性来处理运动.

All i have done here is add the transform translateY property to handle the movement up.

我遗漏了所有额外的浏览器CSS定义，但是您可以肯定地将它们包括在内.

I have left out all the extra browser CSS definitions, but you would want to include them for sure.

希望这会有所帮助！

这篇关于jQuery Waypoint-具有相同CLASS的多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！