Нужно иметь эффект затухания в Javascript

Question

Я делаю вызов Ajax, и в ответ я хотел бы скрыть div. Прямо сейчас я могу сделать это успешно, но это довольно быстро. Я хочу, чтобы на нем было какое-то затухание. Как это сделать за один раз?

Вот мой текущий код.

var someDiv = document.getElementById(someId);
someDiv.style.display="none";

Большое спасибо заранее!

Answer 1

Приятно видеть, что все пять ответов до сих пор относятся к jQuery.

Существует несколько статей о создании эффекта fade с использованием ванильного Javascript , хотя и устали от JavaScript, который большинство людей публикуют в Интернете.

Answer 2

Если вы хотите отказаться от jQuery или фреймворков, вы можете использовать этот шаблон:

function fadeThisElement(elm, interval) {
  for (var i=10; i>0; i--) {
    var opacity = i/10;
    setTimeout( function(opacity) {
      elm.setStyle("-moz-opacity",opacity);
      elm.setStyle("opacity",opacity);
      elm.setStyle("filter","alpha(opacity=" + (opacity*100).toString() );
      //set your alpha values for the various browsers
    }, interval;
  }
}

Дайте интервал в миллисекундах. Я предлагаю 10 для 10-ступенчатого замирания.

Answer 3

Использование jQuery ...

$('#someId').fadeOut();

А вот API Reference на случай, если вам нужно что-то изменить в эффекте fadeOut:

.fadeOut () - API jQuery

Answer 4

Я добавлю MooTools версию для хорошей меры:

$('myid').fade(opacity)

где непрозрачность - значение в интервале [0,1]. Вы также можете назвать это как:

$('myid').fade('out')

Доступно больше вариантов . Размер MooTools составляет 65 КБ (сжатый YUI).

Answer 5

Посмотрите на функцию jQuery fadeOut .

Answer 6

Как насчет использования jquery? Все, что вам нужно, это .fadeOut (), и вы готовы пойти

Answer 7

Я мог бы порекомендовать использовать фреймворк (я предпочитаю jQuery). Он также будет поддерживать кроссплатформенную поддержку.

$('#div-id-here').fadeOut('slow');

Для получения дополнительной информации обратитесь к их документации: jQuery fadeOut