Görünüm portu yatay olarak girdiğinde div için animasyon

Question

Yatay olarak yatay olarak girdiğinde öğeyi canlandırmak istediğim sonsuz bir yatay besleme oluşturuyorum. Bunun için waypoint.js çalışıyorum. 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'dan div donukluk değişecek olan div Ama şimdi elemanları değişim olmaz üzere .show ekleme

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> 

Viewport'a yatay olarak girdiklerinde, 0 ile 1 arasındaki opaklıkları. Bir fikrin neden? Üzgünüm, javascript ve yol noktası için gerçekten çok yeni.

Answer 1

% 100 genişlik yanlış; 500px'e (bireysel öğelerin belirtilen genişliği) değiştirirseniz, çalışır. Bu, optimal değildir, ancak (herhangi bir şeyi değiştirdiğinizde hem JS hem de CSS'yi güncellemeniz gerekir): daha iyi bir yaklaşım muhtemelen JS aracılığıyla öğelerin genişliğini almak ve bu değeri ofset olarak kullanmak olacaktır. offset geçirilen

Yüzde değerleri ben ~ her öğenin genişlikte olmalıdır ofset doğrusu sen, burada ne istediğini değil varsayalım görünümün yüzdeleri vardır. Dakikada, kısmen görünümün içinde yer alan herhangi bir öğe opaktır, bu yüzden hiçbir zaman bir değişiklik görmezsiniz.

noktası işleyicisi içinde

Answer 2

thishttp://imakewebthings.com/waypoints/api/offset-option/ bakın o Ara nokta örneğidir, öğesi değil. $(this.element).addClass('show')