Skip to content

Instantly share code, notes, and snippets.

@yuxel

yuxel/jquery.1000pxbug.html

Created October 22, 2010 14:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yuxel/640615 to your computer and use it in GitHub Desktop.
Save yuxel/640615 to your computer and use it in GitHub Desktop.
Download ZIP
jquery -10000px bug
Raw
jquery.1000pxbug.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery.animate 10000px bug</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
/**
* I'm trying to animate and change margin-left property of an element
* It works fine under -10000px but it doesnt work >= -10000
*
* There's a div#bug container which has a red border, and overflow:hidden
* and a div.inner which has width over -10000px
*
* when i try to animet with margin-left: -10000 i saw TextTextText
* but when tried with margin-left: -99999 it works fine
*/
$(document).ready( function(){
var inner = $("#bug .inner");
$("#marginLeft").click( function(){
inner.animate({
"margin-left": "-10000px" //i see TextTextText on every click
// "margin-left": "-10000" //this doesnt work either
// "margin-left": "-9999" //but its not repreduced below 10000px
}, 1000, function() {
});
});
});
</script>
</head>
<body>
<div id="bug" style="width:500px; border:1px dotted #FF0000; overflow:hidden">
<div class="inner" style="width:12000px">
TextTextText
</div> <!-- .inner -->
</div> <!-- #bug -->
<a id="marginLeft" href="#">Animate</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment