jQuery的背景位置动画 [英] jQuery background-position animation
问题描述
我创建了一个形象基本上是3图像的CSS精灵在一起。它的尺寸为278x123,使他们基本上都是278x41 3张照片。
I've created an image which is basically a CSS sprite of 3 images together. It's size is 278x123 so they are basically 3 images of 278x41.
我所试图做的是改变背景位置,以使一个动画。
What I am trying to do is to make an animation of that by changing the background position.
我试过很多东西,我也不是很努力的解决方案之一是:
I've tried many things, one of my not very working solution is the following:
var $slogan = $('#header h2 span');
$slogan.css({backgroundPosition: '0px 0px'});
function slogan_animation() {
if ($slogan.css('background-position') == '0px 0px') {
$slogan.fadeIn('slow').css('background-position', '0px -41px').fadeOut('slow');
}
else if ($slogan.css('background-position') == '0px -41px') {
$slogan.fadeIn('slow').css('background-position', '0px -82px').fadeOut('slow');
}
else if ($slogan.css('background-position') == '0px -82px') {
$slogan.fadeIn('slow').css('background-position', '0px 0px').fadeOut('slow');
}
}
setInterval(slogan_animation, 2000);
任何想法我怎么能这样做呢?
Any ideas how could I do that?
基本上我只需要:
- 设置我的背景位置为0像素0像素,再从0像素0像素再次移动到0像素-41px,然后0像素-82px,然后循环它。这将是巨大的也有那些之间淡入()的效果。
Basically I just need to: - set my background position to "0px 0px", then move it to "0px -41px", then "0px -82px" and then loop it again from "0px 0px". It would be also great to have fadeIn() effect between those.
任何想法?
感谢您。
推荐答案
的背景位置
的风格是一种复合式的,所以当你读它,它可能不给您所期望的结果。此外,该结果可能browers之间有所不同。
The background-position
style is a composite style, so when you read it, it might not give the result that you expect. Also, the result may differ between browers.
尝试使用一个变量来保持,而不是从款式阅读它的轨道的位置。设置位置你开始褪色前:
Try using a variable to keep track of the position instead of reading it from the style. Set the position before you start the fade in:
$(function(){
var $slogan = $('#header h2 span');
var offset = 0;
window.setInterval(function(){
$slogan.css('background-position', '0 -'+offset+'px')
.fadeIn('slow')
.fadeOut('slow');
offset = (offset + 41) % 123;
}, 2000);
});
这篇关于jQuery的背景位置动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!