Screen Flickering When performing jQuery explode animation

JavaScript
1

HI guys,

I’ve been writing a video player using jquery and I am having a very annoying screen flicker when I use the explode effect. What is supposed to happen is that the user clicks a button on the control bar and the control bar explodes, hides and a new one appears with a different skin.

What is happening in reality is that the above happens but there is a very annoying white flicker across the bottom of the viewport every time that button is clicked.

I have checked all of the other code and it’s definitely the line below which is causing the issue. I don’t use ‘explode’ very often so maybe I’ve just done something silly but I could definitely use another pair of eyes.

thanks


		Player.ChangeSkin = function(skin)
		{
		     // Remove previous skin , store new skin in the player options for next time, add the new skin
		     var identifier = Player.attr("id");
		
                     Player.control_bar.removeClass(Player.current_skin);
                     $("#" + identifier + " .big_play").removeClass(Player.current_skin);
                     $("#" + identifier + " .change_skin ul li a span." + Player.current_skin + "").removeClass("active");
                     Player.current_skin = skin;
		     $("#" + identifier + " .change_skin ul li a span." + skin + "").addClass("active");
		       $("#" + identifier + " .big_play").addClass(Player.current_skin);
		     var src = "css/images/" + skin + ".png";
		     $("#" + identifier + " img.featured").attr("src" ,src);

                      // THIS LINE IS THE PROBLEM
		     // explode control bar and show new control bar
		     Player.control_bar.hide("explode", { pieces: 16 }, function() { Player.control_bar.addClass(skin).show(); } );
		};
2

Hi there,

Could you post a link to a page where I can see this white flicker.

3

Hi there,

Thanks so much for your reply. I actually solved the issue. It was with the CSS rather than the jquery, my animation was exploding the controlbar and then sliding it out of view which was triggering the horizontal scrollbars on the viewport. It was happening so quickly that it looked like a flicker but when I realized what it was, I just set the body overflow-x to hidden and it was done :slight_smile:

thanks