Как создать эффект затухания на вращающемся фоновом изображении с помощью Jquery - PullRequest
Новая
       53

Как создать эффект затухания на вращающемся фоновом изображении с помощью Jquery

2 голосов
/ 24 января 2010

В настоящее время я использую небольшой скрипт jquery для поворота фоновых изображений на сайте портфолио, который я создаю для сайта портфолио друга. Вот код: 

  counter = 1; 
    num_images = 9;
    dir = "IMAGE DIRECTORY URL";

    function rotateHeader() {


 var background_img = 'url(' + dir + '/image' + counter + '.gif)';

 jQuery('.category').css('background-image', background_img);  
 counter++; if (counter > num_images) counter = 1;

    }
    setInterval( "rotateHeader()", 5000 );

Вы можете увидеть это здесь:

www.iamanatom.com / сайт / исправный

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

1 Ответ

1 голос
/ 24 января 2010

Что-то подобное должно сделать это 

var counter = 1, 
    num_images = 9,
    dir = "IMAGE DIRECTORY URL";

function rotateHeader() {

    var background_img = 'url(' + dir + '/image' + counter + '.gif)';

    jQuery('.category').fadeOut(function() {
        jQuery(this).css('background-image', background_img).fadeIn();
    });  
    counter++; if (counter > num_images) counter = 1;
}
setInterval(rotateHeader, 5000 );

Сначала мы потушим текущее фоновое изображение, затем в функции обратного вызова изменим фоновое изображение, а затем вернем его обратно. Возможно, вы захотите поиграть с интервалами fadeOut() и fadeIn(), чтобы получить нужный эффект , Я также изменил setInterval(), чтобы использовать имя функции вместо строки для оценки.

...