Изменение фона

Question

Мне нужно сделать Fadein Background change, но мой код не работает. Что не так?!

Вот мой код:

$(document).ready(function() { 
    var fundoimg = 1; 
    var carrossel = function() { 
     if(fundoimg === 1) { 
      var troca1 = $(".jumbotron").css("background-image","url('../images/bg1.png')"); 
      troca1.fadeIn("slow"); 
      fundoimg = 2; 
     } else { 
      var troca2 = $(".jumbotron").css("background-image","url('../images/bg2.png')"); 
      troca2.fadeIn("slow"); 
      fundoimg = 1; 
     } 
    } 

    setInterval(carrossel,3000); 
}); 

Вот мой CSS код для этого "JumboTron":

.jumbotron { 
    text-align: center; 
    background-size: 17% 100%; 
    background-repeat: no-repeat; 
    background-position: right; 
    background-color: #000000; 
    background-image: url('../images/bg1.png'); 
} 

А вот строка в документе:

<script type="text/javascript" src="scripts/carrossel.js"></script> 

По крайней мере, но не последний, мое дерево файлов:

projectfolder\index.html 
projectfolder\css\style.css 
projectfolder\images\*.png 
projectfolder\scripts\*.js 

Что может быть неправильно ?!

Answer 1

Ваш код работает так, что ваши пути неверны, ваш div не существует, у него нет размера или кода нет на странице.

$(document).ready(function() { 
 
    var fundoimg = 1; 
 
    var carrossel = function() { 
 
     if(fundoimg === 1) { 
 
      var troca1 = $(".jumbotron").css("background-image","url('http://i.imgur.com/o5jk8hA.jpg')"); 
 
      troca1.fadeIn("slow"); 
 
      fundoimg = 2; 
 
     } else { 
 
      var troca2 = $(".jumbotron").css("background-image","url('http://i.imgur.com/ArSY9CS.jpg')"); 
 
      troca2.fadeIn("slow"); 
 
      fundoimg = 1; 
 
     } 
 
    } 
 

 
    setInterval(carrossel,3000); 
 
});

.jumbotron { 
 
    text-align: center; 
 
    background-size: 17% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
    background-color: #000000; 
 
    background-image: url('http://i.imgur.com/ArSY9CS.jpg'); 
 
    width:500px; height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="jumbotron"> 
 

 
</div>