如何使用jQuery刪除元素，但仍保留它存在的空間

有沒有辦法用jQuery隱藏或顯示元素，但仍然保留它在頁面上佔用的空間？例如，一組鏈接和每個下面的段落。當用戶將鼠標懸停在鏈接上時，該段落將消失/顯示，但不會隨着段落被移除而改變佈局。如何使用jQuery刪除元素，但仍保留它存在的空間

2013-06-21 NellyB

你有一個spaceholder，其中有 –

你可以改變你想隱藏 – Novocaine

大廈的答案元素的透明度相同的尺寸來取代它，你可以'動畫（）''opacity' style屬性，如果你想要淡入淡出效果。但是不要在你的情況下使用'fadeIn（）'和'fadeOut（）'，因爲這些方法也會「完全」顯示或隱藏元素，違背了你的先決條件。 –

您可以用CSS隱藏：

jQuery('p').css('opacity', 0);

這樣的元素不可見，但仍填充它需要根據其尺寸的空間。這樣，當您想平滑地隱藏元素時，您還可以爲其設置動畫效果。

2013-06-21 13:14:13 Sutuma

這樣做的很簡單的方法是用visiblity CSS屬性：

$('a').hover(function() { 
    $(this).next().css('visibility', 'visible'); 
}, function() { 
    $(this).next().css('visibility', 'hidden'); 
});

的$(this).next()可能需要修改，找到顯示或隱藏正確的元素。

2013-06-21 13:14:31 lonesomeday

我們不能用CSS來做到這一點嗎？ '〜'？ – j08691

@ j08691可能用'+'來對，雖然很可能DOM結構不是這麼簡單。 – lonesomeday

啊，'+'。還沒有我的咖啡;） – j08691

您可以使用visibility:hidden或opacity:0

隱藏值隱藏的元素，但留下空間，這將有一直

2013-06-21 13:14:52

您可以隱藏使用jquery方法構建元素：

$（'＃ElementId'）。hide（）;

，並使用表現出來：

$（ '＃ElementId'）顯示（）。

2013-06-21 13:17:45

不，這會將'display'設置爲'none'，所以元素不佔用空間。 – lonesomeday

你可以用CSS來做到這一點，不需要JavaScript。

p { 
    visibility:hidden; 
} 
a:hover + p { 
    visibility:visible; 
}

2013-06-21 13:17:46 j08691

即將添加到我的答案，但我會給你一個+1。 – lonesomeday

謝謝，這個工程，但我可以控制元素出現在的速度？我想我必須爲此使用jQuery。 – NellyB

那麼，你沒有提到速度或任何形式的褪色效果在你的問題，所以它沒有。但是，您可以使用CSS3轉換和元素的不透明度在不使用JavaScript的情況下執行此操作。 – j08691

回答