使用 jQuery（也许还有 CSS），我如何隐藏元素而不折叠和动画？答案

【问题标题】：Using jQuery (and perhaps CSS), how do I hide an element without collapse and animation?使用 jQuery（也许还有 CSS），我如何隐藏元素而不折叠和动画？
【发布时间】：2011-10-30 12:41:18
【问题描述】：

以下是将隐藏的所需跨度

<span class="lastSave" name="lastSave">Last Saved by <i name="lastSavedBy"></i> at <i name="lastSaved"></i> </span>

页面下方有一个表格。

以下是某些事件调用的javascript中的相关函数。请注意，这会使桌子向上移动。

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').hide();
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').show();
}

为了替换 javascript 中的上述 sn-ps，我尝试了以下方法。这不会使桌子向上移动。但是这个有某种淡出，这在我的应用程序中是不需要的。

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').animate({opacity:0});
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').animate({opacity:100});
}

【问题讨论】：

您是否试图让它消失但不移动任何周围的元素？你想用动画还是不用动画来完成？这个不是很清楚...
线索就在名字里。 animate() 好吧，它动画。您可以尝试使用 css() 代替动画。如果您想让所有内容保持相同的间距，我建议您使用可见性，并酌情设置为“隐藏”或“可见”。

标签： jquery hide jquery-animate collapse

【解决方案1】：

好吧，我希望其他所有内容都保持原样，所以 jQuery 中的 .hide() 不起作用，因为这相当于在 CSS 中添加以下类

.hide{
display: none
}

另外，我不想要任何形式的动画，所以 .animate() 并将不透明度从 0 更改为 1 不是我想要的。我已经尝试过了，我可以看到元素淡出。我希望它立即消失，而页面中的所有其他人都不会移动。

我决定使用 .css(propertyName, value)

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').css('visibility','hidden');
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').css('visibility','visible');
}

这是添加这样一个类的更短的方法：

.hider{
visibility: hidden
}

到元素使用

function hideLastSaved(form){
    $(' [name="lastSave"]').addClass('hider');
}

function showLastSaved(form){
    $(' [name="lastSave"]').removeClass('hider');
}

类似于 Jamie Dixon 的建议。

我还没有尝试过 Nightw0rk 的建议：

function hideLastSaved(){
    jQuery(' [name="lastSave"]').css('opacity','0');
}

function showLastSaved(){
    jQuery(' [name="lastSave"]').css('opacity','1');
}

但会尝试一下，以便我知道它的外观。

非常感谢大家的精彩建议！

【讨论】：

【解决方案2】：

hide 方法将元素的display 属性更改为none。

如果您想在隐藏元素的同时保持元素位置，请添加一个将visibility 设置为hidden 的类。

CSS：

.hider{
   visibility:hidden;
}

JS

function hideLastSaved(form){
    $(' [name="lastSave"]').addClass('hider');
}

function showLastSaved(form){
    $(' [name="lastSave"]').removeClass('hider');
}

这是一个非常基本的演示：http://jsfiddle.net/dWw7F/

【讨论】：

【解决方案3】：

尝试更改 css 的可见属性。

【讨论】：

【解决方案4】：

function hideLastSaved(){
    jQuery(' [name="lastSave"]').css('opacity','0');
}

function showLastSaved(){
    jQuery(' [name="lastSave"]').css('opacity','1');
}

【讨论】：

我的错误，OP没有指定他希望元素在隐藏时不占用空间，你的答案很好。虽然我已经看到 IE 存在不透明度问题。（连同其他一切）

【解决方案5】：

使用以下代码更改span 的可见性：

$('#uniqueSpanId').animate({opacity: 0.0});

这会将带有uniqueSpanId 的跨度的不透明度更改为0，使其不可见。将其改回来很简单，只需执行相反的命令：

$('#uniqueSpanId').animate({opacity: 1.0});

【讨论】：

【解决方案6】：

另一种方式：

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').css('display','none');
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').css('display','block');
}

jQuery hide() = 设置display: none 和visibility: hidden，带有一个过渡

jQuery show() = 设置display: block 和visibility: visible，带有过渡

【讨论】：

【解决方案7】：

如果您使用的是旧版本的 JQuery，请使用以下内容：

function hideLastSaved(form){
jQuery(' [name="lastSave"]').fadeOut(1);
}

function showLastSaved(form){
jQuery(' [name="lastSave"]').fadeIn(1);
}

“1”只是将时间刻度设置为 1 毫秒，这在技术上没有任何意义，如果您使用的是较新版本的 JQuery，那么只需添加 $ 而不是 JQuery：

function hideLastSaved(form){
$('[name="lastSave"]').fadeOut(1);
}

function showLastSaved(form){
$('[name="lastSave"]').fadeIn(1);
}

【讨论】：