JQuery Fadeout Fadein с проблемой элементов li

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>

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

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

Строки, которые я использую для затухания и затухания, следующие:

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

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

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

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

Answer 1

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

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

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

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

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

$('#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 для вашего ul, чтобы минимизировать влияние его уменьшения до 0 элементов на долю секунды на остальной части страницы, или, если вы действительно хотите сойти с ума, вы можете начать с установки фиксированную высоту текущей высоты, затемните существующий контент, анимируйте его до желаемой высоты, используя Оживить а затем исчезните в своем новом списке.Это обеспечит максимально плавный переход.

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