Затухание в классе до полного исчезновения

Question

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

HTML:

<div id="background_image" class="day"></div> 

CSS:

.day{ 
     background: url(day.png); 
    } 

.night { 
    background: url(night.png); 
} 

JQuery:

setTimeout(function(){ 
    if($("#background_image").hasClass("day")){ 
     $("#background_image").fadeOut(function() { 
      $(this).removeClass("day"); 
     }); 

     $("#Landscape").fadeIn(function() { 
      $(this).addClass("night"); 
     }); 
    }else{ 
      $("#background_image").fadeOut(function() { 
      $(this).removeClass("night"); 
     }); 

     $("#Landscape").fadeIn(function() { 
      $(this).addClass("day"); 
     }); 
    } 
}, 5000); 

Но этот код делает изображение "day.png" первым, чтобы полностью исчезнуть, а затем " night.png "приходит, что не то, что я хочу. Есть ли способ угасать класс «день» и начать исчезать «ночь», не имея пробела между выцветанием? Заранее спасибо

Answer 1

Кажется, что вы пытаетесь сделать, это перекрестное затухание. Обычно это делается с использованием 2 div. Если это для всего фона, я предлагаю http://srobbin.com/jquery-plugins/backstretch/. Вы можете взглянуть на их реализацию, чтобы сузить его до просто div, если вам не нужно, чтобы покрыть весь фон.

Вот как я решил это для аналогичного случая.

var images = [ 
    "/content/images/crane1.jpg", 
    "/content/images/crane2.jpg", 
    "/content/images/crane-interior.jpg" 
]; 
// The index variable will keep track of which image is currently showing 
var index = 0; 

// Call backstretch for the first time, 
// In this case, I'm settings speed of 500ms for a fadeIn effect between images. 
$.backstretch(images[index], { speed: 500 }); 

// Set an interval that increments the index and sets the new image 
// Note: The fadeIn speed set above will be inherited 
setInterval(function() { 
    index = (index >= images.length - 1) ? 0 : index + 1; 
    $.backstretch(images[index]); 
}, 5000); 

EDIT: Для не полный фон, посмотрите на этот пост Crossfade Background images using jQuery

Также обратите внимание на это, может быть ближе к вашему сценарию Cross fade background-image with jQuery