Question

我试图在页面加载时使用jQuery淡入容器。但是，我似乎没有成功。我正在使用的代码如下。

HTML code：

<div class="col-first" id="col-first">
    <div class = "content">
        <p class="contentHeader">What we do</p>
            <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

jQuery代码：

$(document).ready(function(){
    $("#col-first").fadeIn(1000);
});

头部的脚本标签：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

修改

CSS文件：我试过了两个

#col-first{
    visibility: hidden;
}

和

#col-first{
    display: none;
}

Answer 1

fadeIn适用于隐藏元素，因此您的代码无法正常工作。默认情况下，您必须使其显示为none或隐藏我把下面的小提琴联系起来。

$(document).ready(function() {
    $('div').fadeIn(1000);
});

http://jsfiddle.net/q0uypfj4/

Answer 2

试试这个，我认为这就是你要找的东西：

<html>
    <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script> 
                    $(document).ready(function(){
                        $("#col-first").hide();
                        $("#col-first").fadeToggle(1000);
                    });
            </script>         
    </head>

    <div class="col-first" id="col-first">
    <div class = "content">
        <p class="contentHeader">What we do</p>
            <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>
</html>

当页面加载jQuery

2 个答案: