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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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