Question

在下面得到了这个代码（在页面上选择第一段，然后对其应用切换功能，动画高度（增加/减少一定数量）。

问题是，一旦页面加载第一段就消失了，因为你会看到你是否运行它（以某种方式得到一个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>

Answer 1

在jquery的v1.9中删除了

That toggle。而是使用显示和隐藏元素的this toggle。

修改：进一步扩展此内容。 v1.9之前的jQuery有两种不同类型的toggle。一种类型是您尝试在此处使用的类型。这将允许您定义两个要在每次单击元素时交替调用的函数。这在jquery的v1.9中完全删除了。

另一个toggle只是让您切换元素的可见性。如果它是可见的，隐藏它，如果隐藏，显示。因为现在只有一个toggle（隐藏/显示一个）就是你实际调用的，即使你试图调用旧的（现已删除）。您需要自己重新创建此功能。

Answer 2

您在$('p:first')上使用了.toggle()，它会显示或隐藏匹配的元素。正如您在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.

jquery切换动画元素消失

2 个答案: