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的Scroll http://api.jquery.com/scroll/

Answer 2

您的代码似乎有点混乱。我相信您希望将CSS嵌入HTML中，但是您应该将CSS封装在<style>标记内。

回到你的问题，fadeIn()不起作用的原因是你使用了错误的选择器而你没有在第一次加载时隐藏元素。 $(".randomText")选择类名为randomText的元素，但在HTML代码中<p id="randomText">... randomText是id。另一方面，您还应该将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/

Javascript / JQuery中的fadeIn（）效果

2 个答案: