0
私はスクロールの一番下に画像がフェードインする必要のあるコンテンツを作成しています。私はJSFiddleをこれに付け加えて助けを求めてきました。クラスを削除すると、画像がきれいに表示されるようです。何をすべきかわからない。JQuery/Javascriptでスクロールがうまくいきません
https://jsfiddle.net/1ak7q0kg/3/
HTML
<div id="slide1">
<div class="content">
<h2>This is a title</h2>
<div class="quotes_container">
<h3 class="quotes">“Below this content, an image is supposed to fade in.” </h3>
<div class="fadeInBlock"><img src="http://www.strangetravel.com/images/content/120195.jpg"></div>
</div>
</div>
</div>
Javascriptを
$(function() {
$(window).scroll(function(){
$('.fadeInBlock').each(function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */
bottom_of_window = bottom_of_window + 200;
if(bottom_of_window > bottom_of_object){
$(this).animate({'opacity':'1'},1000);
}
});
});
});
CSS
.fadeInBlock {opacity:0;}
jqueryを追加していません。これはどのように動作するのでしょうか? https://jsfiddle.net/1ak7q0kg/4/ –
@Peteyあなたは100%(1)の不透明度と0(0%)の不透明度を混合していることを確かめてください。あなたが何かを消すには、0ではなく1の不透明度が必要です。何かが100%不透明であれば、それを全く見ることはできません。何かが0%不透明であれば、完全に透けて見えます。 –
@MichaelCokerそれはどのように見えるかです。私はJQueryを私の文書で呼びましたが、まだあなたが持っている結果を得ていません。 – Petey