Side navigation
#13326 closed bug (notabug)
Opened January 25, 2013 06:59AM UTC
Closed January 25, 2013 02:50PM UTC
Last modified February 17, 2014 03:01AM UTC
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>
Attachments (0)
Change History (2)
Changed January 25, 2013 02:50PM UTC by comment:1
| resolution: | → notabug |
|---|---|
| status: | new → closed |
Changed February 17, 2014 03:01AM UTC by comment:2
Replying to [ticket:13326 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