为多个背景图片设置动画背景位置

Question

我正在尝试使用jQuery滑块通过动画背景位置来创建背景图像轮播。以下是我的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);

背景位置的动画效果不起作用

我在许多博客中阅读到要使用以下内容：

    backgroundPositionX:'-640px';

对于只有一个背景图片的div，它可以正常工作。但是我不知道如何处理具有多个背景图片的div。

- Abhinav Konda

---

请问你能不能给我解释一下？ - Abhinav Konda

Answer 1

一个选项是使用CSS3过渡效果，并添加多个带有ID的图像，如下所示：

HTML

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

CSS

#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; }
}

- davewoodhall

Answer 2

你可以在CSS类中设置备用样式，过渡效果也在CSS中实现，只需使用脚本切换类即可：

CSS

#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;

}

scripting:

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

- vals