Используя 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

Ну, я хотел, чтобы все остальное оставалось на месте, поэтому .hide() в jQuery не работал, потому что это эквивалентно добавлению следующего класса в 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');
}

, аналогичный тому, что предлагает Джейми Диксон.

Я не пробовал то, что предлагает Nightw0rk:

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

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

но попробую, чтобы я знал, как это выглядит.

Большое спасибо всем за ваши блестящие предложения!

Answer 2

Попробуйте изменить свойство css visible.

Answer 3

Метод 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 4

Если вы используете более старые версии 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);
}

Answer 5

Другой способ:

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, с переходом

Answer 6

Используйте следующий код для изменения видимости span:

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

Это изменит непрозрачность диапазона с uniqueSpanId до 0, сделав его невидимым.Чтобы вернуть его обратно, просто выполните противоположную команду:

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

Answer 7

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

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