javascript toggling background images

Question

У меня есть следующий кусок JS, который переключает цвет BG с красного на зеленый и так далее.

function blink() { 
      var currentColor = 'red'; 
      setInterval(function() { 
       document.body.style.backgroundColor = currentColor; 
       currentColor = currentColor === 'red' ? 'green' : 'red'; 
      }, 1000); 
     }; 

Есть ли способ изменить цвет изображения, чтобы он переключался между двумя изображениями вместо двух цветов?

Я попытался следующие, но без успеха:

function toggleBG() { 
      var currentColor = "Images/tableBGRed.gif"; 
      setInterval(function() { 
       var myDiv = document.getElementById("testDiv"); 
       myDiv.style.backgroundImage = "url('" + currentColor + "')"; 
       currentColor = currentColor === "url('Images/tableBGRed.gif')" ? "url('Images/tableBG.gif')" : "url('Images/tableBGRed.gif')"; 
      }, 1000); 
     }; 

Что-то не так с синтаксисом?

Answer 1

currentColor = currentColor === "url('Images/tableBGRed.gif')" ? "url('Images/tableBG.gif')" : "url('Images/tableBGRed.gif')"; 

заставит строку, чтобы стать чем-то вроде "url(url(' Images/cat.gif '))", который не является допустимым значением для myDiv.style.backgroundImage,

, так как вы получили myDiv.style.backgroundImage = "url('" + currentColor + "')"; в предыдущей строке.

Обновления:

Вы можете использовать CSS3, чтобы сделать его похожим на анимацию (замирание):

#testDiv{ 
-webkit-transition: all 0.1s ease; 
-moz-transition: all 0.1s ease; 
-ms-transition: all 0.1s ease; 
-o-transition: all 0.1s ease; 
transition: all 0.1s ease; 
} 

Answer 2

Мне кажется, что ваш код создает BackgroundImage как

url('url('Images/xxx.gif')') 

Try

function toggleBG() { 
    var currentColor = "url('Images/tableBGRed.gif')"; 
    setInterval(function() { 
     var myDiv = document.getElementById("testDiv"); 
     myDiv.style.backgroundImage = currentColor; 
     currentColor = currentColor === "url('Images/tableBGRed.gif')" ? "url('Images/tableBG.gif')" : "url('Images/tableBGRed.gif')"; 
    }, 1000); 
};