Как сделать плавное исчезновение html-кода?

Question

[Space]

Привет. Вот @iiil подсказал код

$('span.alert').html('Нельзя отправлять сообщения чаще, чем раз в 2 секунды');
setTimeout(function(){
    $('span.alert').html('');
},1000);

На странице есть тэг span. Вопрос: как сделать плавное исчезновение это тега? Jquery или можно на чистом js?

Comments

[Space]

Или же, чтобы это было анимацией. Например, тэг улетает влево. Подкиньте какую-нибудь статью, сайт.

Answer 1

[Tyranron]

jQuery.fadeOut() ?

Comments

[Space]

спасибо, по изучаю.

Answer 2

[Руслан Касымов]

судя по коду у Вас и так уже jquery используется. Что бы плавно исчез сделайте $('span.alert').fadeOut();

Comments

[Space]

@HDApache у вас текст потом не появляется, правильно вариант ниже. Но так как, я не указал это, то тоже правильно.спасибо.

Answer 3

[Юрий Лобанов]

jquery у Вас итак применяется, уже нет смысла на чистом js писать. Использование fadeOut - правильное решение, но не забудьте потом показать элемент, иначе при следующем добавлении текста он не будет виден. Сделать можно так:

var alert = $('span.alert');
alert.html('Нельзя отправлять сообщения чаще, чем раз в 2 секунды');
alert.fadeOut(2000);
setTimeout(function(){
    alert.html('');
    alert.show();
},2010);

или вот так:

var alert = $('span.alert');
alert.show();
alert.html('Нельзя отправлять сообщения чаще, чем раз в 2 секунды');
alert.fadeOut(2000);

Comments

[Space]

@iiil спасибо, оба варианта работают.

[Space]

@iiil вопрос: а почему вы указали в первом варианте 2010?

[Юрий Лобанов]

@ruslite ну это не очень красиво, на самом деле. Дело в том, что работает fadeOut и уже заканчивается timeout и в итоге текст не исчезает. то есть 10 мс для того, чтобы однозначно перекрыть fadeout.

[Space]

@iiil понятно. Второй вариант более чистый.