Анимация CSS-дисплея

Ответ 1

Просто используйте .show(), передав ему параметр:

$(".maincontent").show(2500);

Изменить (на основе комментариев):

Вышеупомянутый код замирает в элементе за 2,5 секунды. Если вместо этого вы хотите задержка на 2,5 секунды, а затем хотите, чтобы элемент отображался, используйте следующее:

$(".maincontent").delay(2500).fadeIn();

Если, конечно, вам нужна задержка и более длительное увядание, просто передайте количество миллисекунд, желаемое в каждом методе.

Ответ 2

Вы можете сделать что-то вроде этого:

$("div").css({
    "opacity":"0",
    "display":"block",
}).show().animate({opacity:1})

Пример: http://jsfiddle.net/charlescarver/g7z6m/

Это учитывает display:none, так как он все равно будет удален из потока страницы до тех пор, пока код не будет вызван, где он отобразит его, а затем установите его непрозрачность на 0. Затем он будет анимировать его непрозрачность 1, когда вы вызываете код.

Ответ 3

Попробуйте это (как я уже упоминал в комментариях):

Вы можете использовать метод .delay(). I.E:

$(".maincontent").delay(2500).show();

Ответ 4

Анимация непрозрачности с использованием jQuery более жизнеспособна, чем свойство отображения, здесь непрозрачность анимируется от 0 до 1 за 1 секунду:

$(".maincontent").animate({opacity:1},1000)

Тогда css должен выглядеть следующим образом:

.maincontent{ 
opacity: 0;
}

Если вы планируете скрыть весь блок перед переходом, вы можете иметь свойство отображения.

.maincontent{
opacity: 0;
display: none;
}

Затем, чтобы показать блок с анимацией:

$(".maincontent").show().animate({opacity:1},1000 function(){
  (callback function here)
})

Надеюсь, это поможет!