jQuery hide()和show()的替代方案有哪些？

Question

我正在尝试隐藏页面中的一个元素（它是一个YouTube播放器实例）。当我使用jQuery的hide()方法时，播放器会出现一些问题，即使我再次调用.show()方法，它也停止响应。

是否有另一种hide()方法的变体，比如.opacity(0)或.visibility('none')，我可以使用？我并不介意播放器在页面上占用空间，我只想将其隐藏起来，这样用户就无法与之交互，直到我准备好显示视频（播放器需要立即加载视频，但在用户从另一个UI元素中选择视频之前，我没有视频！）

- user246114

Answer 1

你可以将元素的CSS显示属性设置为none，但这与$.hide()所做的基本相同。

不要隐藏包含视频播放器的元素，考虑“遮蔽”它。不要修改播放器元素的可见性，而是在其上方渲染另一个元素，并调整该元素的可见性。

- Jon Cram

---

如果可能的话（取决于您页面上的内容），将元素移出屏幕通常可以解决问题。我不确定YouTube播放器是否适用，但我曾遇到过闪存视频播放器在其display为none时无法完全加载的问题。在这些情况下，将其移至屏幕外可以解决我的问题。尝试使用.css({'position':'absolute','left':'-500px'})代替hide()，使用.css({'position':'inherit','left':'0'})代替show()。 - Andrew

我该如何将一个元素渲染在其上方？ - user246114

你的视频正在一个对象或嵌入元素中进行渲染。jQuery 可以轻松告诉你该元素在页面上的位置。使用 jQuery 在文档的（几乎）任何地方追加另一个具有相同宽度和高度以及相同位置的元素。如果需要更多详细信息，则最好提出另一个问题。 - Jon Cram

Answer 2

尝试

.css('visiblity', 'collapse');

- SLaks

Answer 3

如果你想使用jQuery来隐藏和显示元素，你可以使用.slideUp()和slideDown()方法。

$('#example').slideDown(milliseconds); //tag animation take milliseconds to scroll up and hide

$('#example').slideUp(milliseconds);

- ali sohi