如何使用Jquery在旋转背景图像上创建淡入效果
我目前正在使用一个小jquery脚本在我为朋友的公文包网站创建的公文包网站上旋转背景图像,代码如下:如何使用Jquery在旋转背景图像上创建淡入效果,jquery,css,image-rotation,Jquery,Css,Image Rotation,我目前正在使用一个小jquery脚本在我为朋友的公文包网站创建的公文包网站上旋转背景图像,代码如下: counter = 1; num_images = 9; dir = "IMAGE DIRECTORY URL"; function rotateHeader() { var background_img = 'url(' + dir + '/image' + counter + '.gif)'; jQuery('.category').css('bac
counter = 1;
num_images = 9;
dir = "IMAGE DIRECTORY URL";
function rotateHeader() {
var background_img = 'url(' + dir + '/image' + counter + '.gif)';
jQuery('.category').css('background-image', background_img);
counter++; if (counter > num_images) counter = 1;
}
setInterval( "rotateHeader()", 5000 );
您可以看到它在这里工作:
我想做的是让图像和/或颜色淡入淡出。我想我必须先预装图片才能做到这一点,然后在加载图片时添加某种淡入淡出属性。
我该怎么做呢?像这样的东西应该能做到
var counter = 1,
num_images = 9,
dir = "IMAGE DIRECTORY URL";
function rotateHeader() {
var background_img = 'url(' + dir + '/image' + counter + '.gif)';
jQuery('.category').fadeOut(function() {
jQuery(this).css('background-image', background_img).fadeIn();
});
counter++; if (counter > num_images) counter = 1;
}
setInterval(rotateHeader, 5000 );
首先淡出当前背景图像,然后在回调函数中更改背景图像,然后淡入。您可能需要使用
fadeOut()
和fadeIn()
间隔来获得想要的效果。我还更改了setInterval()
以使用函数名,而不是字符串进行求值。好的,非常感谢您,这产生了淡入淡出的效果,但现在我有另一个问题——如果你看看我的实现:www.iamanatom.com/site/the-good,你会看到整个页面淡入淡出,而不仅仅是背景图像。不知道该怎么办!啊,我想我知道为什么了——我试图操纵的元素是body(我使用category作为一个类,因为我只想要博客页面上的效果)。不幸的是,这个元素包裹了所有内容,所以它会淡入整个页面。我认为我的解决方案是创建一个绝对定位的div,它动态地拾取我需要的类,并且位于主页元素之外。。。我们看看这是否有效