Jquery is a great library for helping you create slick User Experiences, but every now and again it appears to be a bit clunky and slow in some browsers. I noticed the flickering content problem while testing in Firefox 3.5.5 on a PC and was sure the problem would appear in Internet Explorer, but for the most part, Jquery works better in IE.
The flickering occurs when animating content. Example code below…
//Toggle
$('.timeline-btn').toggle(
function() {
$(this).toggleClass('close').blur();
$('#showhide').slideDown(1000);
},
function() {
$(this).toggleClass('close').blur();
$('#showhide').slideUp(1000);
});
To solve the problem, simply add this piece of CSS code to the flickering element, in this case, the ‘#showhide’ div.
element {
overflow:hidden;
}
If you know of any other ways to remedy this problem or this hasn’t fixed your problem please post below.
Hello,
Thanks for the suggestion. Can you tell me where exactly I should make this edit? I was unable to find any references to “#showhide” in any of my jquery code (I’m using jQuery UI 1.7.2 and jQuery UI Accordion 1.7.2).
I appreciate any help.
Best,
Russ
Hi Russ,
In the code above #showhide is the name of the element that I am showing/hiding. so if you are wanting to show/hide an element with an id of ‘myslide’ simply change #showhide to #myslide
If you find you are still having problems, simply email me using the contact form on the contact page with a link to the page you are wanting to fix and I will have a look at it for you.
Also. StackOverflow is a great place to ask questions like this http://stackoverflow.com/
Clinton,
Thanks so much for your help. This was great.
Russ
Hi,
I am just starting out with jQuery and have come across this issue.
I am adding the CSS code “overflow:hidden;” to my element, however it does not seem to be making any difference?!…..
In my case the flicker occurs on a form field. the code can be seen below:
Any help would be appreciated. thanks in advance!
$(“.required”).blur(function() {
var errMessage = “This field is required. Please enter a value.”;
if ($(this).val()==”"){
$(this).addClass(“error”);
$(this).parent().find(“span”).html(errMessage).addClass(“slideClass”).slideDown(‘fast’);
} else {
$(this).removeClass(“error”);
$(this).parent().find(“span”).html(errMessage).addClass(“slideClass”).slideUp(‘fast’);
}
});
You might want to have a look at http://dev.jquery.com/ticket/5743
If you pick one of the last testcases you will see how easy it is to isolate and show at the same time the root cause of such problems. Such testcases are very easy to publish, and occasional visitors are much more inclined to analyse and comment on such problems than commenting on code snippets that they cannot try in isolation.
So if you can make such a testcase, why not enter it into the jquery ticket system and ask visitors to comment on them. Even if the ticket gets closed. It does not matter. We are still a free society.
Thanx! Works great. I had a sIFR in a slideDOwn container that flickered, and this fixed the problem.
Great! Glad I could be of help. It took me quite a while to find a solution, but hopefully this will help you.
Thanx workde great for me!