Javascript 为多个背景图像设置背景位置动画

在这里，我试图通过设置背景位置的动画，使用jqueryslider创建一个背景图像滑块。 这是我的html和CSS

<div id="sliderWrapper">

</div>

#sliderWrapper
{
    /*background-color: transparent;*/
    width: 620px;
    height: 349px; 
    background-image: url(images/1.png), url(images/2.jpg);
    background-position: 0px 0px, 620px 0px;
    background-repeat: no-repeat,no-repeat;
    background-size: cover,cover;
    -webkit-background-size: cover,cover;
    -moz-background-size: cover,cover;        
}
$('#sliderWrapper').animate({
    'backgroundPosition':'-620px 0px,0px 0px'
}, 1500);

---

它适用于具有单个背景图像的div。但我不知道如何处理具有多个背景图像的div。

一个选项是使用CSS3转换并添加多个ID图像，如下所示：

HTML

---

您可以在CSS类中设置备用样式，也可以在CSS中设置转换，只需使用脚本切换类：

CSS

脚本编写：

$('#button').click(function () {
        $('#test').toggleClass('test2')
})

---

你能给我解释一下吗。

<div id="bg_imgs">
    <img src="img1.jpg id="bg1" />
</div>

#bg_imgs { z-index: -1; /* places the DIV behind the default "layer" on content */ }
#img1 {
  -webkit-animation: myanim 5s infinite; /* Chrome, Safari 5+ */
     -moz-animation: myanim 5s infinite; /* Firefox 5-15 */
       -o-animation: myanim 5s infinite; /* Opera 12.00 */
          animation: myanim 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
}

@-webkit-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-o-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

#test
{
    width: 620px;
    height: 349px; 
    background-image: url(image1.jpg), url(image2.jpg);
    background-position-x: 0px, 620px;
    background-position-y: 0px, 0px;
    background-repeat: no-repeat,no-repeat;
    background-size: cover,cover;
    transition: background-position-x 1.5s;
}

#test.test2 {
    background-position-x: -620px, 0px;

}

$('#button').click(function () {
        $('#test').toggleClass('test2')
})