fadeIn() эффект в Javascript/JQuery

Question

Я новичок в javascript. Я хочу, чтобы вы просматривали страницы в определенном месте, появлявшемся в тексте. Я пытаюсь сделать это с помощью fadeIn(), но не подходит ко мне. Браузер не видит никакого эффекта. Я был бы очень благодарен за объяснение.

<div id="about_content"> 
     <p id="randomText">Lorem ipsum dolor sit amet, ...</p> 
</div> 



<script> 
    $(document).ready(function() { 
     $(".randomText").fadeIn('slow'); 
    ); 

</script> 

#about_content{ 
box-sizing: border-box; 
width: 70vw; 
height:50vh; 
background-color: pink; 
margin: 0 auto; 
position:relative; 
top:25vh; 
padding:20px; 
    } 

#randomText { 

font-size:1.5em; 

} 

Answer 1

function testScroll(ev){ 
    if(window.pageYOffset>400){ 
     $('#randomText').fadeIn('slow'); 
    } 
} 
window.onscroll=testScroll 

Вместо этого вы можете использовать Свиток JQuery в http://api.jquery.com/scroll/

Answer 2

Ваш код, кажется, немного грязный. Я считаю, что вы хотите встроить свой CSS в HTML, но вы должны заключить CSS внутри тега <style>.

И еще к вам вопрос, почему fadeIn() не работает, так это то, что вы используете неправильный селектор, и вы не скрываете элемент при первой загрузке. $(".randomText") выберите элемент с именем класса randomText, но в вашем HTML-коде <p id="randomText">...randomText - это идентификатор. С другой стороны, вы должны также добавить свойство CSS display: none в элемент #randomText.

Во-вторых, вы хотите исчезать только тогда, когда пользователь прокручивает текст, поэтому вам нужно будет связать событие scroll с прослушивателем. А в слушателе вы определяете, достиг ли он текстового элемента. Если да, то он должен исчезать в тексте. Ссылка: Trigger event when user scroll to specific element - with jQuery

Так исправление будет изменение JavaScript для

$(document).ready(function() { 
    $(window).scroll(function() { 
     var el = $('#randomText'); 
     if ($(this).scrollTop() > el.offset().top+el.outerHeight()-$(this).height()) { 
      $('#randomText').fadeIn('slow'); 
     } 
    }); 
}); 

и в вашем CSS дополнения:

#randomText { 
    display: none; 
} 

JSFiddle: https://jsfiddle.net/vnyth81e/