jquery切换动画元素消失答案

【问题标题】：jquery toggle animate elements disappearingjquery切换动画元素消失
【发布时间】：2014-03-31 18:07:09
【问题描述】：

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

问题是，一旦页面加载第一段就会消失，你会看到你是否运行它（不知何故得到一个 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>

【问题讨论】：

嗯，是的，在激活 doc ready 命令后，您可以切换第一段。看起来它也在做它被告知的事情。

标签： jquery css jquery-animate toggle

【解决方案1】：

您在$('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.

【讨论】：

【解决方案2】：

That toggle 在 jquery v1.9 中被删除。而是使用this toggle 来显示和隐藏元素。

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

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

【讨论】：