Простое fadeIn и видимость в jQuery

Я пытаюсь изменить свойство css visibility div на visible с помощью перехода jQuery .fadeIn().

Вот мой код:

$('a').click(function() {
    $('#test').fadeIn('slow', function() {
     $(this).css('visibility','visible');
  });
});

и скрипка: http://jsfiddle.net/np6r7/

Ответ 1

Вы не можете анимировать visibility. fadein отключается display:none;, поэтому должно быть #test начальное состояние через CSS. Если вам нужно сохранить макет, вы можете попробовать выполнить тест на упаковку в div, который определяет высоту и/или ширину, которые вам нужны.

Ответ 2

На самом деле мне понравился davidaam ответ. Я бы сделал небольшую модификацию:

    $('#test').css('visibility','visible').hide().fadeIn("slow");

Ответ 3

Вы также можете использовать непрозрачность CSS в сочетании с JQuery fadeIn для достижения того же.

Вместо использования видимости в вашем CSS используйте opacity: 0; Затем используйте jQuery FadeTo, чтобы увеличить непрозрачность до 100%:

$('#test').fadeTo('slow', 1);

Это сохранит позиционирование, как видимость, однако важно отметить, что opacity: 0 отвечает на такие события, как щелчок и нажатие, а также участие в таборде. Кроме того, я также читал, что ответственное использование visibility: hidden, а не display: none лучше для SEO, но я не уверен, как это относится к opacity: 0.

JSFIDDLE: http://jsfiddle.net/np6r7/15/