jQuery: Animate background image
Modifying this script, I'm able to go through background images and cycle them through the body 'background-image' property. However, I'm wanting to know if it's possible to use jQuery animate (or another method) to perform a fade transition. I've attempted to use other scripts, such as the jQuery cycle plugin, but the issue seems to be the fixed attribute. Here's what I have working so far:
<style>
body{
/*Remove below开发者_运维百科 line to make bgimage NOT fixed*/
background-image:url(/sites/default/files/bg-3.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-size:100%;
}
</style>
<script type="text/javascript">
(function($){
$(document).ready(function(){
var bgimages=new Array()
bgimages[0]="/sites/default/files/bg-1.jpg"
bgimages[1]="/sites/default/files/bg-2.jpg"
bgimages[2]="/sites/default/files/bg-3.jpg"
//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++){
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}
var inc=-1
function bgSlide(){
if (inc<bgimages.length-1)
inc++
else
inc=0
$('body').css({'background-image':'url('+pathToImg[inc].src+')'});
}
setInterval(function(){
bgSlide();
},3000);
});
})(jQuery)
</script>
I'm fairly certain you can't do this exactly.
You could simulate this by having a div (or image) behind your content that acts as a background, similar to this:
http://jsfiddle.net/HDWpM/
David Walsh explains how you can do this with MooTools here you can have look! You can use jQuery also, MooTools is just a different library.
Here is the demo : http://davidwalsh.name/dw-content/background-animation.php
精彩评论