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

backgroundPosition的动画效果不正常

我在很多博客中都读过以下内容

    backgroundPositionX:'-640px';

对于具有单个背景图像的div，它可以正常工作。但我不知道如何使用具有多个背景图像的div。

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

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;

}

脚本：

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

多个背景图像的动画背景位置

2 个答案:

HTML

CSS