Добавление плавного перехода при переходе в addClass для фонового изображения с использованием jQuery

Question

Я использую jQuery для добавления и удаления класса в / из моих навигационных ссылок, которые изменяют фоновое изображение. Вы можете увидеть это в действии на этой странице .

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

Я не уверен, как это сделать с помощью jQuery, и был бы признателен за любые советы. Вот пример функции щелчка, как она выглядит в настоящее время:

$("nav").delegate("a.fade", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");
        $(this).addClass("current");
        $("#contact").removeClass("current");
        return false;
    });

Спасибо

Ник

Answer 1

Эта статья должна вас заинтересовать:

Переходный затухание изображения с помощью jQuery:

http://css.dzone.com/news/jquery-image-cross-fade-transi

Answer 2

$('#panel').animate({ opacity: '-=0.5' }, 200); 

Используйте функцию jQuery.animate. Из моего примера # непрозрачность панели (начиная с 1) снизится до 0,5 в течение 200 миллисекунд.

Сделайте это для #panel и #contact. Вы можете поэкспериментировать со временем, чтобы они анимировали так, как вы хотите.

$('object').animate({property: target value (-/+)}, timespan);

Вы также можете проверить значение прозрачности #panel, чтобы запустить анимацию #contact.

если # panel.opacity <0.8 затем # contact.animate ... </p>