#13326 closed bug (notabug)
a bug has beed found in chrome
| Reported by: | anonymous | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.9.0 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
Hi: First thanks you for developed Jquery for everyone. Today i used Jquery to write a script in chrome have some problems happend.
when i click "bigger"or"smaller", it will be flicker....
but i use Jquery"jquery-1.3.1.js" this bug not hanppen in chrome. only use advanced this bug will be.
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "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>Textarea</title> <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <script> $(function(){
var $comment = $("#comment"); $(".bigger").click(function(){
if(!$comment.is(":animated")){ if($comment.height() < 500 ){
$comment.animate({height:'+=50'},400); }
}
})
$(".smaller").click(function(){ if(!$comment.is(":animated")){ if($comment.height() > 50 ){
$comment.animate({height:'-=50'},400); } }
});
});
</script> <body> <form action="" method="post"> <div class="msg">
<div class="msg_caption">
<span class="bigger" >Bigger</span> <span class="smaller" >smaller</span>
</div> <div>
<textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
</div>
</div> </form>
<style type="text/css">
- { margin:0; padding:0;font:normal 12px/17px Arial; }
.msg {width:300px; margin:100px; } .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;} .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; } .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;overflow:hidden;} </style>
</body> </html>
Change History (2)
comment:1 Changed 7 years ago by
| Resolution: | → notabug |
|---|---|
| Status: | new → closed |
comment:2 Changed 6 years ago by
Replying to anonymous:
Hi: First thanks you for developed Jquery for everyone. Today i used Jquery to write a script in chrome have some problems happend.
when i click "bigger"or"smaller", it will be flicker....
but i use Jquery"jquery-1.3.1.js" this bug not hanppen in chrome. only use advanced this bug will be.
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "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>Textarea</title> <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <script> $(function(){
var $comment = $("#comment"); $(".bigger").click(function(){
if(!$comment.is(":animated")){ if($comment.height() < 500 ){
$comment.animate({height:'+=50'},400); }
}
})
$(".smaller").click(function(){ if(!$comment.is(":animated")){ if($comment.height() > 50 ){
$comment.animate({height:'-=50'},400); } }
});
});
</script> <body> <form action="" method="post"> <div class="msg">
<div class="msg_caption">
<span class="bigger" >Bigger</span> <span class="smaller" >smaller</span>
</div> <div>
<textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
</div>
</div> </form>
<style type="text/css">
- { margin:0; padding:0;font:normal 12px/17px Arial; }
.msg {width:300px; margin:100px; } .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;} .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; } .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;overflow:hidden;} </style>
</body> </html>
I also have encountered the problem with the same example。 but there are some difference with you: First,I use last version of Jquery（1.11.0） Second,My javascript code not in html.
My problem is here:
$comment.animate({height : "+= 50"},400);
A space behind ‘+=’。remove the space ,The code will run OK.
Thanks for contributing! We only support the latest versions. Please try again with the latest versions, and if you still see a bug, please submit a new report with a reduced test case on jsfiddle.net