Jquery Fadeout FadeIn лития элементы проблема

Question

я иметь следующий неупорядоченный список:

<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> 

У меня есть счетчик «actualpage этого имя переменное» с текущей страницей для другой стороны.

С помощью Jquery im, пытающегося затухать и исчезать, когда пользователь нажимает эти две кнопки и зависит от счетчика фактической страницы.

Линии, которые им с помощью для FADEOUT и FadeIn являются следующие:

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

Эффект работает, но им, имеющие эффект мерцания, элементы начинает FADEOUT, но на данный момент список больше в пространстве высоты. Когда fadein будет завершен, список вернется к исходному размеру высоты.

В чем может быть проблема или как я могу ее решить?

Заранее спасибо. С уважением. Josema.

Answer 1

Мне кажется, что ваша проблема довольно проста. Вы создаете список, как правило, этот список Ваши пункты как этот

• пункта 1
• пункт 2
• пункт 3

и т.д., скажем, список выше, имеет высоту 3. Теперь, если бы я должен был угаснуть пункты 1 и 2, они исчезли бы в течение 500 миллисекунд и, в конечном счете, были бы невидимыми. В этот момент jquery изменяет отображение с block на none, в результате чего ваш браузер удалит элемент из представления, а ваш список имеет высоту 1.

Теперь, если элемент 3 был невидим в начале, я бы список высот 2, пунктов 1 и 2 начинает исчезать (они еще не исчезли), и я начинаю исчезать в пункте 3, jquery изменяет отображение пункта 3 на «блок», давая мне список высот 3 , в то время как затухание (до тех пор, пока 1 и 2 не закончатся, исчезают и удаляются).

Что вы можете сделать, это начать свой Fade-в после того, как вы закончили гаснуть, как это:

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

Функция, которая передается в качестве второго параметра FADEOUT будет вызываться, когда замирание завершено. Вы, вероятно, увидите кратковременное мерцание после fadeOut и перед fadeIn, в течение которого список будет иметь ноль.

Другой подход состоял бы в том, чтобы иметь два отдельных списка, помещенных с использованием абсолютного позиционирования, чтобы занять одно и то же пространство на веб-странице, и постепенно их вытеснять и одновременно, но это немного больше.

Answer 2

Ваша проблема заключается в том, что ваше затухание не ждет, пока ваш фиолетовый закончится. Это делает список таким же большим, как и оба, до тех пор, пока исчезновение полностью не исчезнет.

Предполагая, что желаемый эффект для того, чтобы исчезнуть из сплошь тогда правильные данные, чтобы исчезнуть в вы после:

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

Вы также можете рассмотреть вопрос об установлении CSS мин высоты на вашем ул к свести к минимуму влияние его уменьшения на 0 элементов на долю секунды на остальной части страницы, или если вы действительно хотите сходить с ума, вы можете начать с установки фиксированной высоты текущей высоты, исчезнуть из существующего содержимого, оживить его до нужной высоты, используя Animate, а затем исчезнуть в новом списке. Это даст плавный переход.

(Если это не то, что вам нужно, уточните предполагаемый результат, и я дам ему еще один выстрел =))