asked on

jQuery: slideDown() causes flicker

In my example below, when you check the box to trigger slideDown() there is a quick flicker.

How can the flicker be avoided?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

div.xyz {
background: #eee;
padding: 10px;
margin: 10px;
}

div.xyz span {
display: none;
margin: 0;
padding: 0;
}

div.xyz span em {
margin: 0 0 0 20px;
display: block;
font-style: normal;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>

<h1>Click Checkbox to Test Animation.</h1>

<div>
 <div class="xyz" >

  <p>
  <input class="selectMe" type="checkbox" value="1" />
  Click Here to Test
  <span>
   <em>
    Hello
   </em>
   <em>
    World
   </em>
   <em>
    <input type="text" />
   </em>
  </span>
  </p>

  <p>
  <input class="selectMe" type="checkbox" value="1" />
  Click Here to Test
  <span>
   <em>
    Hello
   </em>
   <em>
    World
   </em>
   <em>
    <input type="text" />
   </em>
  </span>
  </p>

 </div>
</div>

<script type="text/javascript">
/* <![CDATA[ */

	$('input:checkbox').attr('checked',false);
	$('.selectMe').click(function() {
	 if(  $(this).attr('checked')) $(this).siblings("span").slideDown(1000);
	 else $(this).siblings("span").slideUp();
	});

/* ]]> */
</script>

</body>
</html>

Open in new window

chuckalicious

Which browser are you using? I've found that some of the animations are not very smooth in IE8. So much so that I've had to disable them and just use "show" and "hide".