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

【问题标题】：animating background position for multiple background images为多个背景图像设置动画背景位置
【发布时间】：2013-12-29 15:58:16
【问题描述】：

在这里，我尝试使用 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);

backgroundPosition 的动画不工作

我阅读了很多博客使用以下内容

    backgroundPositionX:'-640px';

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

【问题讨论】：

你能解释一下吗？

标签： javascript jquery html css

【解决方案1】：

您可以在 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;

}

脚本：

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

【讨论】：

【解决方案2】：

一种选择是使用 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; }
}

【讨论】：