在下面获得了此代码(选择页面上的第一段,然后对其应用切换功能,以对高度进行动画处理(将其增加/减少一定数量)。

问题是,页面加载后,第一段就会消失,您将看到是否运行它(以某种方式获得display:none属性,这大概就是为什么它消失了)。

有人知道为什么会这样吗?

<html>
<head>
    <title></title>
    <script src="jquery-1.11.0.js"></script>
    <!-- <script src="jquery.color-2.1.0.js"></script> -->
    <script>
    $(document).ready(function(){
        $('p:first').toggle(function() {
            $(this).animate({'height':'+=150px'}, 2000, 'linear');
        }, function() {
            $(this).animate({'height':'-=150px'}, 2000, 'linear');
        });
    });
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, ipsa, ea, et alias architecto iste ipsum velit esse soluta rem earum magni veritatis voluptatem consequatur omnis recusandae beatae quaerat praesentium!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, ipsa, ea, et alias architecto iste ipsum velit esse soluta rem earum magni veritatis voluptatem consequatur omnis recusandae beatae quaerat praesentium!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, ipsa, ea, et alias architecto iste ipsum velit esse soluta rem earum magni veritatis voluptatem consequatur omnis recusandae beatae quaerat praesentium!</p>
</body>
</html>

最佳答案

您正在.toggle()上使用$('p:first'),它将显示或隐藏匹配的元素。当您准备在DOM上调用.toggle()时,即$(document).ready(function()第一个p将被隐藏。

从文档中:

The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

07-24 09:45
查看更多