Side navigation
#7450 closed bug (duplicate)
Opened November 09, 2010 04:33PM UTC
Closed November 09, 2010 07:34PM UTC
Last modified March 13, 2012 06:57PM UTC
Animate with left position below -10000px is buggy - inserts an animate to 0 in the middle
Reported by: | lazahu@gmail.com | Owned by: | |
---|---|---|---|
Priority: | low | Milestone: | 1.5 |
Component: | effects | Version: | 1.4.3 |
Keywords: | left position animation | Cc: | |
Blocked by: | Blocking: |
Description
Test the code below and go beyond the 100th block with the right arrow. An extra stage (left:0) is inserted in the middle of the animation. Works perfect with 1.4.2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Animate bug</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif;} #container {position:relative;height:100px;} #container .btn {position:absolute;width:100px;bottom:0;font-size:64px;text-decoration:none;} #container #left {left:0;} #container #right {right:0;} #container .btn a {display:block;line-height:100px;text-align:center;text-decoration:none;} #window {position:absolute;left:100px;right:100px;top:0;bottom:0;overflow:hidden;border:1px solid #ccc;} #window ul {position:absolute;left:0;top:0;width:20000px;list-style:none;margin:0;padding:0;} #window ul li {float:left;display:inline;width:94px;height:92px;line-height:92px;margin:3px;padding:0;text-align:center;font-size:32px;color:#999;background-color:#eee;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ for(var i=0; i<200; i++) $('#scroll').append('<li>'+i+'</li>'); $('#left>a').click(function(){ var ww=$('#window').width(); var cleft=$('#scroll').position().left; $('#scroll').stop(true,false).animate({left:Math.min(cleft+ww,0)},2000); }); $('#right>a').click(function(){ var ww=$('#window').width(); var cleft=$('#scroll').position().left; $('#scroll').stop(true,false).animate({left:Math.max(cleft-ww,-20000+ww)},2000); }); }); </script> </head> <body> <div id="container"> <div class="btn" id="left"><a href="javascritp:void(0)"><</a></div> <div class="btn" id="right"><a href="javascritp:void(0)">></a></div> <div id="window"> <ul id="scroll"></ul> </div> </div> </body> </html>
Attachments (0)
Change History (7)
Changed November 09, 2010 04:54PM UTC by comment:1
Changed November 09, 2010 07:34PM UTC by comment:2
component: | unfiled → effects |
---|---|
keywords: | → left position animation |
priority: | undecided → low |
resolution: | → duplicate |
status: | new → closed |
Changed November 09, 2010 09:44PM UTC by comment:4
Thanks for the report but the next time please consider following the procedure detailed under How to Report Bugs. Then you should have found that this was already reported.
Sorry for the duplicate post. I did some research but couldn't find the original report. This is my first bug report and I wasn't aware your policies, please forgive my ignorance.
Changed November 10, 2010 02:05PM UTC by comment:5
I've been experienced the same issue with a slide show implementation, where I animate margin-left. Works fine as long as the margin-left start value does not go below -10 000 (as in -10 001 etc). It does animate fine to any value less than -10 000.
The issue was solved by downgrading the jQuery core package to 1.4.2.
Changed November 12, 2010 10:49AM UTC by comment:6
A heuristic bugfix starting from line 6617 in jQuery.fx.prototype:
// Get the current size cur: function() { 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 r; },
Changed November 22, 2010 03:22AM UTC by comment:7
This is a duplicate of another bug, as indicated above. Please stop commenting on this bug.
Duplicate of #7193.
Thanks for the report but the next time please consider following the procedure detailed under How to Report Bugs. Then you should have found that this was already reported.
Additionally as described it would have been good practice to not paste a html blob in the ticket but instead link to a test case on http://jsfiddle.net which is reduced to bare minimum to reproduce the problem.