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

LVL 16
hankknightAsked:
Who is Participating?
 
darren-w-Commented:
ok,

here is a demo with and without the em styling:
<!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;
            }
            p.exp{
                margin: 0;
                padding:0;
                display: none;
            }

            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>
        <script type="text/javascript">
            /* <![CDATA[ */
            $(function(){
                $('input:checkbox').removeAttr('checked');
                $('.selectMe').change(function(){
                    console.log('gothere')
                    $('p.exp').slideToggle('slow');
                    
                });
                $('.selectMe2').change(function(){
                    console.log('gothere')
                    $(this).siblings('span').slideToggle('slow');

                });
            })

            /* ]]> */
        </script>
    </head>
    <body>

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

        <div>
            <div class="xyz" >

                <p>
                    <input class="selectMe" type="checkbox"  />
                    Click Here to Test<br />
                </p>
                <p class="exp" >
                    Hello<br />
                    World<br />
                    <input type="text" />

                </p>

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

            </div>
        </div>



    </body>
</html>

Open in new window


there is a little jump on the first item, though this is just down to styling
0
 
chuckaliciousCommented:
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".
0
 
darren-w-Commented:
I think its to do with the em's , look at animation jump here:

http://jqueryfordesigners.com/animation-jump-quick-tip/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
hankknightAuthor Commented:
This is not caused by the <em>s and the problem is with all browsers.  If you test the code I posted you will see the problem.
0
 
hankknightAuthor Commented:
I still see a flicker.  There is a little jump on the first item.
0
 
hankknightAuthor Commented:
I see, there is no flicker in the first item where you removed the <em>s.  I was testing the second item. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.