Question

我创建了一个无限的水平馈送，我希望在元素水平进入视口时对其进行动画处理。我为此尝试了waypoint.js。

<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

将.show添加到div，这会将div的不透明度从0更改为1.

$(function() {
$(".item").each(function(){
   $(this).waypoint(function() {
     $(this).addClass('show');
     }, {
       offset: '100%',
       horizontal: true
     });  
 });      
});

CSS

.item
{
width:500px;
height:250px;
background:red;
color:#fff;
display:inline-block;
opacity:.2;
}
.item.show
{
opacity:1;
}

但现在元素在水平进入视口时不会将其不透明度从0更改为1。知道为什么吗？对不起，我是javascript和waypoint的新手。

Answer 1

100％宽度不正确;如果将其更改为500px（单个项目的指定宽度），它将起作用。这不是最佳的（你需要在更改任何东西时更新JS和CSS）：更好的方法可能是通过JS获取项目的宽度，并使用该值作为偏移量。

传递给offset的百分比值是视口的百分比，我认为这不是你想要的，而是偏移应该是〜每个项目的宽度。此时，任何甚至部分位于视口内的项目都是不透明的，因此您永远不会看到任何更改。

请参阅http://imakewebthings.com/waypoints/api/offset-option/

Answer 2

航路点处理程序中的

this不是元素，它是Waypoint实例。您想使用$(this.element).addClass('show')

div在水平进入视口时的动画

2 个答案: