jquery - 使用 jQuery(也许还有 CSS)，如何隐藏元素而不折叠和动画？

Question

以下是将隐藏的所需跨度

<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 中的上述代码片段，我尝试了以下操作。这不会使 table 向上移动。但这个有某种淡出效果，这在我的应用程序中是不需要的。

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

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

Answer 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');
}

但我会尝试一下，这样我就知道它是什么样子。

非常感谢大家提出的宝贵建议!