0

Начал работать с jQuery. По нажатию кнопки у меня "всплывает" div поверх всех остальных элементов страницы, появление делаю так :

$(".upper_block").fadeIn(400);
$(".upper_block").css("display","block");

div появляется гладко и все ок , но при "растворении" возникают проблемы :

$(".upper_block").fadeOut(400);
$(".upper_block").css("display","none");

Растворение происходит сразу и полностью, а мне хотелось чтобы было плавно. Поэтому .css("display","none") не пишу.

Не вылезет ли мне это потом боком?) И возможно .fadeOut и .css() (которые в моем случае) делают одно и то же?)

P.S если что не ругайтесь, я всего лишь новичек)

3
  • 1
    $(".upper_block").css("display","none"); это скрытие сразу, fadeOut - скрытие за определенное время, т.е. 400мс, в результате одно и то же.
    – Dem
    19 апр 2013 в 8:56
  • 1
    не надо display менять, fadeIn/FadeOut сам его меняет jsfiddle.net/oceog/Ft9Tz
    – zb'
    19 апр 2013 в 9:02
  • всем спасибо)
    – whispeer
    19 апр 2013 в 9:05

1 ответ 1

8

В jQuery есть такие методы как .hide() и .show(), а также .fadeOut() и .fadeIn()

.hide() спрячем элемент сразу же, по сути это тоже самое что просто написать .css('display', 'none');

.show() аналогично hide, но наоборот тут же отобразит элемент. ПОЧТИ тоже самое что и .css('display', 'block'), но умнее. он смотрит окружение элемента и устанавливает ему нужное, будь то 'inline-block', 'table-row', 'block' или прочие..

.fadeOut('скорость', 'ускорение', 'callback ф-ция') - это анимированный аналог hide(), в который можно указать собственно скорость, easing-функцию (они же кривые бизье) и callback функцию которая будет вызвана по окончанию анимации. Пример:

$('#elem').fadeOut(400, 'swing', function(){
    alert('ахренеть, элемент исчез')
})

.fadeIn() - анимированный аналог show(), с тем же синтаксисом что и fadeout
4
  • @eicto нет, show() смотрит на стили. А вот у toggle() проперти.
    – lampa
    19 апр 2013 в 13:25
  • @lampa jsfiddle.net/oceog/Ft9Tz там правда какая-то ерунда с inline/inline-block, превращается inline в inline-block, а так - запоминает.
    – zb'
    19 апр 2013 в 13:55
  • show() и hide() тоже не так просты, у них есть параметр скорости и их анимация отличается от обычного display: none|block
    – Dem
    19 апр 2013 в 14:05
  • @Dem, верно, но для новичка лучше разжевать. ".hide()" - в таком виде элемент спрячется мгновенно, однако если указать ".hide(350)" - элемент будет плавно уходить в прозрачность и через 350 миллисекунд спрячется полностью 19 апр 2013 в 17:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.