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

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

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

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

Answer 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/

Answer 3

尝试更改 css 可见属性。

Answer 4

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

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

Answer 5

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

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

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

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

Answer 6

另一种方法：

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

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

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

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

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