使用jQuery（也許是CSS），我該如何隱藏一個沒有摺疊和動畫的元素？

以下是所期望的跨度，這將被隱藏使用jQuery（也許是CSS），我該如何隱藏一個沒有摺疊和動畫的元素？

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

來源

2011-08-19 angela

您是否試圖讓它消失，但不移動任何周圍的元素？你想用動畫還是不用？這不是很清楚...... – Nayish

線索是在名稱中。動畫（），它動畫。你可以嘗試使用css（）而不是動畫。我建議使用可見性，如果要以相同的方式隔開所有內容，則視情況設置爲「隱藏」或「可見」。 – daveyfaherty

隱藏方法改變了元件的至none的display屬性。

如果要在隱藏元素的同時保留元素的位置，請添加一個將visibility設置爲hidden的類。

CSS：

.hider{ 
    visibility:hidden; 
}

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

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

這裏是一個非常基本的演示：http://jsfiddle.net/dWw7F/

來源

2011-08-19 10:42:04

嘗試changinging的CSS可見屬性。

來源

2011-08-19 10:43:06 Sleeperson

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

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

來源

2011-08-19 10:47:31 Nightw0rk

不透明度爲0.0和1.0，而不是0和100 ... – 2011-08-19 10:49:20

錯誤=）複製粘貼 – Nightw0rk

我的錯誤之間，該任擇議定書沒有指定他想要的元素時隱時佔用任何空間，你的答案是罰款。雖然我見過IE有不透明的問題。（與其他一切） – daveyfaherty

使用下面的代碼來改變span的可見性：

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

這將改變跨度的透明度與uniqueSpanId 0使其不可見。改變它從背面簡單反其道而行之命令：

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

來源

2011-08-19 10:47:50 Nayish

的另一種方法：

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，轉型

來源

2011-08-19 10:52:29 daveyfaherty

好吧我想要一切留在原地，所以jQuery中的.hide()沒有工作，因爲這等同於CSS

.hide{ 
display: none 
}

還增加了下面的類，我不希望任何形式的動畫所以.animate()和不斷變化的不透明度從0到1不是我正在尋找的。我試過了，我可以看到這個元素淡出。我希望它在頁面移動時不會立即消失。

我決定使用的CSS（propertyName的，值）

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

，但會嘗試只是讓我知道它的樣子。

非常感謝您的寶貴建議！

來源

2011-08-22 01:29:52 angela

如果您使用的是舊版本的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); 
}

來源

2014-01-09 21:04:09 user2558741

使用jQuery（也許是CSS），我該如何隱藏一個沒有摺疊和動畫的元素？

回答

相關問題