在下面获得了此代码(选择页面上的第一段,然后对其应用切换功能,以对高度进行动画处理(将其增加/减少一定数量)。
问题是,页面加载后,第一段就会消失,您将看到是否运行它(以某种方式获得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.