Bug Tracker

Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#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 6 years ago by mikesherov

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

comment:2 in reply to:  description Changed 5 years ago by 240896322@…

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.

Note: See TracTickets for help on using tickets.