Joseph Michael Pesch
VP Programming

jQuery Fixing Flicker Issue with .slideUp()

by 16. August 2010 05:03

Sometimes using the .slideUp() method results in a flicker effect right near the end of the animation.  Two basic resolutions are as follows:

 

 

 

 

Option 1) Add this doctype tag to the html page: 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

Option 2) Set a timeout just short of the .slideUp() animiation length and .stop() the animation and .hide() the element:

 

//Start the slideUp effect lasting 500ms

$('#element').slideUp(500);

 

//Abort the effect just before it finishes and force hide()

//I had to play with the timeout interval until I found one that

// looked exactly right. 400ms worked for me.

setTimeout(function () {

  $('#element').stop(true, true).hide();

}, 400);

 

 

Tags:

JQuery

Comments are closed