Javascript/JQuery中的fadeIn（）效果

我是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;

 }

Lorem ipsum door sit amet
$（文档）.ready（函数（）{
$（“.randomText”）.fadeIn（'slow'）；
);
#关于内容{
框大小：边框框；
宽度：70vw；
高度：50vh；
背景颜色：粉红色；
保证金：0自动；
位置：相对位置；
顶部：25vh；
填充：20px；
}
#随机文本{
字号：1.5em；
}

---

相反，您可以使用jQuery的滚动键，您的代码似乎有点凌乱。我相信您希望将CSS嵌入HTML中，但您应该将CSS包含在

标记中

回到您的问题，

fadeIn（）

不起作用的原因是您使用了错误的选择器，并且没有在第一次加载时隐藏元素。

$（“.randomText”）

选择类名为

randomText

但在HTML代码

…

randomText

是id。另一方面，您还应该将CSS属性

display:none

添加到

#randomText

元素中

其次，您希望仅当用户滚动到文本时淡入，因此您必须将

滚动

事件绑定到侦听器。在侦听器中，您确定它是否已到达文本元素。如果是，则它应淡入文本。 参考：

因此，修复程序将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;
}

---

jsFIDLE:

您的问题很难理解，您是否试图让用户滚动到页面中的某个点时淡入？除了使用错误的选择器之外，

fadeIn

只会淡入当前不可见的元素：例如

显示：无

是，当用户滚动到re文本仍然不起作用。我不知道为什么，我的浏览器似乎不支持JQuery…您使用的是哪个浏览器和哪个版本？Chrome 50.0.2661.102 m Firefox 46.0.1打开控制台并键入

$

查看您得到的结果。如果它返回的内容您的浏览器可能支持JQuery，则它将返回

$undefinded

。在控制台中，检查您的网络选项卡是否正确包含jQuery.js文件。@MateuszGorzelak一个可能的原因是，

$（“#randomText”）

无法查询元素。您是否可以将整个文件内容复制到和/或更新您的问题以供我查看？

#randomText {
    display: none;
}