jquery 动画问题

发布于 2024-11-02 09:05:14 字数 1651 浏览 0 评论 0原文

我在这里遇到了一个奇怪的问题,更有趣的是它在 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 是否会产生问题,或者这是一个巧合。

有人见过这种问题吗?是否有可能解决它。或者我已经杀死了这个“生命”?

谢谢 !

I have got a weird problem here, and more interesting that it works fine on jquery version 1.5.2 and doesn't on version 1.4.3.

So, I am going to drop a piece of the code here:

$('.slides .items').animate({
    left: number + 'px'
}, 500, 'swing');

Here is an item of the 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>

So, when this number>1000px the animation seems cycling the whole items from the begging again, until is going to get in right position

I am not sure if 1000px makes the problem, or it is a coincidence.

Did somebody ever seen that kind of problem and if it is possible to fix it. Or I have kill this 'animate' ?

Thanks !

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

紫竹語嫣☆ 2024-11-09 09:05:14

好的,我发现问题了,这是 jQuery 核心 bug,它对 animate 有限制,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;

}

Ok, I found the problem, it is jQuery core bug, it has limitation on animate, 10000px.

It is easy to fix, just add or change this part of the code:

$.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;

}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文