[英]how to change the background of a div smoothly?
I have created on script for changing the background of a div continuously after some time intervals as following 我在脚本上创建了一些时间间隔后,连续更改div的背景,如下所示
jQuery( function( $ ) {
var images = [ "images/bg-a.jpg","images/bg-b.jpg" , "images/bg-c.jpg" ];
var bg_spans = [ "#bg-a","#bg-b","#bg-c" ];
var currentImage = 0;
function changeBackground() {
$( '#bdy' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')'} );
for(i=0; i<bg_spans.length; i++ ) {
if(i==currentImage) {
$( bg_spans[currentImage]).css ( { background: "#eb5405"} );
$( bg_spans[currentImage]).css ("border-color","#fff" );
}
else {
$( bg_spans[i]).css ( { background: "#000098"} );
$( bg_spans[i]).css ("border-color","#000098" );
}
}
if ( currentImage >= images.length - 1 ) {
currentImage -= images.length;
}
}
setInterval( changeBackground, 6000 ); `});
here the images are changing after some time intervals. 在这里,图像会在一段时间后变化。 I want some animation effects with this transition.
我想要一些动画效果与此过渡。 for example images should fade smoothly.
例如图像应平滑消失。 How can i do this?
我怎样才能做到这一点?
I would lay all images on top of eachother. 我会将所有图像放在彼此的顶部。 All with opacity 0 except the first.
除第一个外,所有不透明度均为0。 Than jquery animate the opacity from the second to 1 and the first to 0. And so on...
比jquery动画的不透明性从第二个变为1,第一个变为0。依此类推...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.