JQuery Fadeout, then fadein working but flickering effect
<p>I have this two uls:</p>

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


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

<p>Here is my javascript code that is executed when i click the button:</p>

<pre><code>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);
  }
  );
}
</code></pre>

<p>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.</p>

<p>The effect is working but with flickering, do you know why?</p>

<p>Thanks in advance.</p>

<p>Jose</p>
