Animation für div, wenn es horizontal in das Ansichtsfenster eintritt

Question

Ich erstelle einen unendlichen horizontalen Feed, in dem ich das Element animieren möchte, wenn es horizontal in das Ansichtsfenster eindringt. Ich versuche waypoint.js dafür.

JS FIDDLE

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

Hinzufügen .show div die Opazität von div von 0 bis 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; 
} 

ändern Aber jetzt sind die Elemente nicht ändern würde ihre Deckkraft von 0 bis 1, wenn sie horizontal in das Ansichtsfenster eintreten. Irgendeine Idee warum? Entschuldigung, ich bin wirklich neu in Javascript und Wegpunkt.

Answer 1

Die 100% Breite ist falsch; Wenn Sie es zu 500px (die angegebene Breite der einzelnen Elemente) ändern, wird es funktionieren. Dies ist jedoch nicht optimal (Sie müssen sowohl das JS als auch das CSS aktualisieren, wenn Sie etwas ändern): Ein besserer Ansatz wäre wahrscheinlich, die Breite der Elemente über JS zu ermitteln und diesen Wert als Offset zu verwenden.

Prozentuale Werte, die an offset übergeben werden, sind Prozentsätze des Ansichtsfensters, von dem ich annehme, dass es nicht das ist, was Sie hier wollen, eher sollte der Offset ~ die Breite jedes Elements sein. Momentan ist jedes Element, auch nur teilweise im Ansichtsfenster, undurchsichtig, so dass Sie nie eine Änderung sehen.

Siehe http://imakewebthings.com/waypoints/api/offset-option/

Answer 2

this in dem Wegpunkt-Handler ist nicht das Element, es ist die Waypoint-Instanz ist. Sie möchten $(this.element).addClass('show')