#7450 closed bug (duplicate)
Animate with left position below -10000px is buggy - inserts an animate to 0 in the middle
| Reported by: | 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>
Change History (7)
comment:1 follow-up: 4 Changed 7 years ago by
comment:2 Changed 7 years ago by
| Component: | unfiled → effects |
|---|---|
| Keywords: | left position animation added |
| Priority: | undecided → low |
| Resolution: | → duplicate |
| Status: | new → closed |
comment:4 Changed 7 years ago by
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.
comment:5 Changed 7 years ago by
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.
comment:6 Changed 7 years ago by
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;
},
comment:7 Changed 7 years ago by
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.