使用Jquery在Firefox中为背景位置设置动画
我正在尝试仅为背景图像的y位置设置动画。
代码在除Firefox之外的所有浏览器中都很有用 我在前面的讨论中已经注意到FF有background-position-y
的问题,但我不想仅为这个特殊情况包含一个插件。
$(".module").animate({ "height": 160, "background-position-y": cropsize //variable for needed position }, "slow");
正如在这个问题中回答: 仍然有jQuery背景动画的问题 – 在safari和IE中工作,没有别的! 我应该可以使用普通的background-position
属性,但这样做只会破坏其他浏览器中的动画。
$(".module").animate({ "height": 160, "background-position": "0 "+cropsize+"px" }, "slow");
也许这只是一个我遗漏的语法错误,但我似乎无法在FF中使用它(最新版本)
background-position-x/y
实际上不是任何CSS规范的一部分,它的IE特定CSS,添加到IE5.5,后来由Webkit实现。
Opera和Firefox不接受它。
最好的解决方案是使用step
方法,它可以让你动画几乎任何东西。
为了向Luka的答案添加一些内容,即使方法是正确的,这有点不对,使用step
方法的最简单方法是为一些任意值设置动画,然后勾选一步,例如:
$('elem').animate({ 'border-spacing': -1000 }, { step: function(now, fx) { $(fx.elem).css("background-position", "0px "+now+"px"); }, duration: 5000 });
该元素必须包装jQuery样式以接受jQuery方法,如css()
。 我使用了border-spacing
,但任何不会影响你网站的css属性都可以使用,只需记住在CSS中为所用的css属性设置一个初始值。
step
方法也可以单独使用,如果设置fx.start和fx.end值,使用它就像Luka一样, now+=1
几乎等于使用setInterval,但是这个想法听起来都是一样的。
小提琴
编辑:
对于更新版本的jQuery,还有其他选项,请参阅以下答案:
JQuery动画背景图像在Y轴上
firefox不了解jquery动画的背景位置,但firefox接受css3动画。
码:
if ($.browser.mozilla) { $('.tag').css({ 'background-position': 'center 0px', '-moz-transition': 'all 1500ms ease' }) } else { $('.tag').animate({ 'background-position-y': 0 }, 1500); }
看起来jquery的animate只会占用一个背景属性,而不是两者。 您可以使用百分比或像素,两者都可以。 但据我所知,没有办法只指定x或y坐标。 希望有人可以certificate我错了,但这就是这个小提琴似乎表明的:
http://jsfiddle.net/JMC_Creative/dPjSz/
此外,无论您将哪些背景位置值放入css,jquery动画似乎总是从“0 50%”开始。 嗯…
使用步骤参数:
$("item").animate({ opacity:1, }, step: function(now, fx){ $(fx.elem).css("background-position","0px "+now+"px"); now+=1; } });
来自jQuery文档: http : //api.jquery.com/animate/#step
$initElement.addClass(initClass).animate( {height:[0, 'easeInCirc'], top: ['+=' + initHeight, 'easeInCirc'] , borderSpacing:[initHeight,'easeInCirc']}, {step: function(now, fx) { $initElement.css({"background-position" : "0px -"+now+"px"} )}, }, {duration: time4design, queue:false}, function(){ $initElement.removeClass(initClass)});
var x = 0; var y = 0; window.setInterval(function() { $(".layer").css("background-position", x + "px " + y + "px"); x++; y--; }, 50);
这很简单:-)来源http://makeasite.ru/blog/animate-background-position-firefox.html
background-position
动画仅适用于jQuery 1.5.2或更低版本
在jQuery中,您可以像这样设置background-position-x
或y
动画:
$(selector).animate({ backgroundPositionY: amountToAnimate }, duration);
这个想法是在javascript中-
字符是字符串之外的保留运算符。 jQuery使用camelcase来解决这个问题。