我在这里遇到了一个奇怪的问题,更有趣的是它在jquery 1.5.2版本上工作正常,而在版本1.4.3上没有。
所以,我将在这里删除一段代码:
$('.slides .items').animate({
left: number + 'px'
}, 500, 'swing');
以下是HTML的一项:
<div class = 'slides'>
<div class = 'items'>
<div class = 'item' style = 'background: url(img/slides/slide-1919.jpg) no-repeat;'>
<div class = 'nav'>
<div class = 'back link' onclick = 'changeSlide(-1);'></div>
<div class = 'forward link' onclick = 'changeSlide(1);'></div>
</div>
<div class = 'title'><span class = 'textBuffer'>1919</span></div>
<div class = 'contentTitle'><span class = 'textBuffer'>The first Loblaw <em>Groceterias</em> store opens in Toronto</span></div>
<div class = 'content'><span class = 'textBuffer'>The new self-serve, cash-and-carry concept of grocery retailing is a big hit with customers, who take advantage of quality goods at lower prices. Within a decade, the Loblaw chain expands to more than 70 stores in Ontario alone.</span></div>
</div>
........
</div>
</div>
所以,当这个number>1000px
动画似乎再次从乞讨中循环整个项目,直到将进入正确的位置
我不确定1000px是否会出现问题,或者这是巧合。
有人见过那种问题,是否有可能解决它。或者我杀了这个'animate'?
谢谢!
答案 0 :(得分:2)
好的,我发现了问题,它是jQuery核心bug,它对动画有限制,10000px。
很容易修复,只需添加或更改此部分代码:
$.fx.prototype.cur = function(){ // we are overwriting this function to remove limiting of the size of the
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
return this.elem[ this.prop ];
}
var r = parseFloat( jQuery.css( this.elem, this.prop ) );
return typeof r == 'undefined' ? 0 : r;
}