JQuery Fadeout, then fadein working but flickering effect

Question

I have this two uls:

<ul actualpage="0" id="lastcompanieslist" hideable="true" upperpage="1">
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">1</
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">2</li>
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">3</li>
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">4</li>
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">5</li>
   <li page="1" style="display: none;"><img src="/images/OrangeArrow.jpg">6</li>
   <li page="1" style="display: none;"><img src="/images/OrangeArrow.jpg">7</li>
</ul>


<ul actualpage="0" id="lastmodifiedcompanies" hideable="true" upperpage="1">
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">1</li>
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">2</li>
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">3</li>
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">4</li>
   <li page="0" style="display: none;"><img src="/images/OrangeArrow.jpg">5</li>
   <li page="1" style="display: none;"><img src="/images/OrangeArrow.jpg">6</li>
   <li page="1" style="display: none;"><img src="/images/OrangeArrow.jpg">7</li>
   <li page="1" style="display: none;"><img src="/images/OrangeArrow.jpg">8</li>
   <li page="1" style="display: none;"><img src="/images/OrangeArrow.jpg">9</li>
</ul>

Here is my javascript code that is executed when i click the button:

function Paging(ul)
{
  //ul is the jquery ul that should be paged
  ul.find('li[page!=' + $($(this).parent()).attr('actualpage') + ']').fadeOut(500,
  function() 
  {
      ul.find('li[page=' + $($(this).parent()).attr('actualpage') + ']').fadeIn(500);
  }
  );
}

Im trying to fadeout the LI elements depending on the current page number (this number is stored in the attribute 'actualpage' of the parent UL, and after fadein those LI elements whose page matches with the actualpage attribute of the parent UL.

The effect is working but with flickering, do you know why?

Thanks in advance.

Jose

Answer 1

could be a lack in browser performance , can we see an example or the information on which browser you testet, if you only tested on one, try another and lets see if it flickers the same on both :)

edit Now i know whats the problem, your pictures have to be positioned absolute so the are one over the other. i'm pretty sure thats the problem . just try adding position: relative to your ul and position: absolute to your li this will solve the problem i hope

Answer 2

Have you tried to set fixed width to the li elements?
Maybe the flickering effect is caused by the fact that javascript is trying to asume dimensions of the boxes with a set of functions that sometimes is not very precise.