Jquery Fadeout fadein with li elements problem

Question

Hi,

i have the following unordered list:

<ul id="#lastcompanieslist">
<li style="display: none;" page="0">whatever 1</li>
<li style="display: none;" page="0">whatever 2</li>
<li style="display: none;" page="0">whatever 2</li>
<li style="display: none;" page="0">whatever 3</li>
<li style="display: none;" page="0">whatever 4</li>
<li style="display: none;" page="1">whatever 5</li>
<li style="display: none;" page="1">whatever 6</li>
<li style="display: none;" page="1">whatever 7</li>
<li style="display: none;" page="1">whatever 8</li>
</ul>
<p class="NextPrevious">
<img src="/Images/PreviousItem.jpg" id="previousbutton" /> 
<img src="/Images/NextItem.jpg" id="nextbutton" />
</p>

I have a counter "actualpage is the variable name" with the current page for other hand.

With Jquery im trying to fadeout and fadein li elements when the user clicks this two buttons and depending of the counter of actual page.

The lines that im using for fadeout and fadein are the following:

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500);
$('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500);

The effect is working, but im having a flickering effect, the items starts to fadeout, but for a moment the list is bigger in height space. When the fadein is complete, the list returns to the original height size.

What could be the problem, or how could i solve it?

Thanks in advance. Kind Regards. Josema.

Answer 1

It seems to me that your problem is pretty much straightforward. You're creating a list, normally, this list your items like this

• item 1
• item 2
• item 3

etc, let's say the list above to has a height of 3. Now, if I were to fade out item 1 and 2, they'd fade out for 500 milliseconds, and eventually be invisible. At that point jquery changes the display from block to none, causing your browser to remove the element from view, and your list has a height of 1.

Now, if item 3 was invisible at the beginning, I'd have a list of height 2, item 1 and 2 starts to fade out (they're not gone yet), and I start to fade in item 3, jquery changes the display of item 3 to 'block' giving me a list of height 3, while fading (until 1 and 2 are finished fading, and are removed).

What you can do is start your fade-in after you've finished your fade out, like this:

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500,
    function() {
       $('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500);
    }
);

The function which is passed as a second parameter to fadeOut will be called when the fading is complete. You'll still probably see a brief flicker after the fadeOut and before the fadeIn, during which the list will have a height of zero.

A different approach would be to have two separate lists, placed using absolute positioning to occupy the same space on the web page, and fade them out and in simultaneously, but that's a little bit more work.

Answer 2

Your problem is that your fade-in is not waiting for your fade-out to finish. This is making the list as big as both combined until such time as the fade out is completely gone.

Assuming the desired effect is for it to fade out entirely then the correct ones to fade in you're after:

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500, function() {
$('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500); });

You may also want to consider setting a CSS min-height on your ul to minimize the impact of it being reduced to 0 elements for a split second on the rest of the page, or if you really want to go nuts you could start by setting a fixed height of it's current height, fade out it's existing content, animate it to the desired height using Animate and then fade in your new list. This would give the smoothest transition.

(If that's not what you're after, clarify the intended result and I'll give it another shot =))