jqueryによって背景画像のプロパティを変更することはできません

Question

タイトルのように、何らかの理由で私の機能はbackground-imageプロパティへの変更を実行したくありません。私はまた、機能しているかどうかを確認するために、background-colorを変更しました。したがって、問題は構文にないようです。

function feedSlide() { 
 
    var x = [ 
 
    '../img/feed1.png', 
 
    '../img/feed2.png', 
 
    '../img/feed3.png', 
 
    '../img/feed4.png' 
 
    ]; 
 
    var y = ['green', 'red', 'blue', 'yellow']; 
 
    for (var i = 0; i < x.length; i++) { 
 
    setTimeout(function(z) { return function() { 
 
     console.log(x[z]); 
 
     $('#feedback').css({"background-image" : "url(" + x[z] + ")"}); 
 
     $('#feedback').css({"background-color" : y[z] }); 
 
    }; }(i), 1000*i); 
 
    } 
 
}

#feedback { 
 
    width: 400px; 
 
    text-align: justify; 
 
    padding: 10px; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="aboutDiv"> 
 
    <div id="feedback"></div> 
 
    <div id="audio"></div> 
 
</div>

私は今時間その上だとすべてが変更のようですが、background-image。どんな情報でも大歓迎です。

Answer 1

この問題を解決するたびに失敗したため、私はCSSアニメーションで解決策を見つけました。

#feedback { 
    height: 110px; 
    width: 380px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    animation-name: feedSlide; 
    animation-duration: 40s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 

@keyframes feedSlide { 
0.00% {background-image: url(../img/feed1.png); opacity: 0;} 
3% {opacity: 1;} 
22% {opacity: 1;} 
25% {background-image: url(../img/feed1.png); opacity: 0;} 
26% {background-image: url(../img/feed2.png); opacity: 0;} 
29% {opacity: 1;} 
47% {opacity: 1;} 
50% {background-image: url(../img/feed2.png); opacity: 0;} 
51% {background-image: url(../img/feed3.png); opacity: 0;} 
54% {opacity: 1;} 
72% {opacity: 1;} 
75% {background-image: url(../img/feed3.png); opacity: 0;} 
76% {background-image: url(../img/feed4.png); opacity: 0;} 
79% {opacity: 1;} 
97% {opacity: 1;} 
100% {background-image: url(../img/feed4.png); opacity: 0;} 
} 

Answer 2

あなたは以下のコード、

function feedSlide() { 
    var x = [ 
    'feed1.png', 
    'feed2.png', 
    'feed3.png', 
    'feed4.png' 
    ]; 
    var y = ['green', 'red', 'blue', 'yellow']; 
    for (var i = 0; i < x.length; i++) { 
    setTimeout(function(z) { return function() { 
     console.log(x[z]); 
     var element = document.getElementById('#feedback'); 
     element.style.backgroundImage = "url('img/" + x[z] + "')"; 
     element.style.backgroundColor = y[z]; 
    }; }(i), 1000*i); 
    } 
}