Skip to main content

Bug Tracker

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 mikesherov comment:1

resolution: → notabug
status: newclosed

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

Changed February 17, 2014 03:01AM UTC by 240896322@qq.com 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.