jQuery fadeOut не изменяет свойство отображения

#jquery #slideshow #fadein #fadeout

#jquery #слайд-шоу #затухание

Вопрос:

Вкл http://judi.simpleupdates.com Я пытаюсь создать слайд-шоу из изображений на странице, используя jQuery fadeIn и fadeOut эффекты. Оба элемента fadeIn без проблем. Однако fadeOut не изменяет display свойство div , которое должно исчезнуть. Есть идеи, почему это может работать не так, как ожидалось?

Это строка, в которой происходит сбой:

 $( ".carousel_item:nth-child("   selected   ")" ).fadeOut(600);

ОБНОВЛЕНИЕ: Похоже, проблема связана с fadeOut элементом, у которого нет width и height . Когда значения добавляются к свойствам width и height div.carousel_item , fadeOut вызов не работает должным образом. Другой метод заключается в удалении position: absolute из потомка, img в результате чего div увеличивается до img размеров.

1. Можете ли вы предоставить несколько строк кода из вашего приложения?

2. не могли бы вы, пожалуйста, удалить комментарий к fadeout, чтобы мы могли его протестировать

3. рассматриваемый код теперь запущен. извините за это: P

Ответ №1:

похоже, проблема связана с fadeOut элементом, у которого нет width и height . когда значения добавляются к свойствам width и height div.carousel_item , fadeOut вызов не работает должным образом. другой метод заключается в удалении position: absolute из потомка, img в результате чего div увеличивается до img размеров.

спасибо за всю вашу помощь и предложения!

Ответ №2:

может быть, вам просто нужно заменить текущую и выбранную переменные друг на друга в jQuery-selector? если я правильно понимаю, вы хотите отключить текущее и отключить выбранное, не так ли?

1. нет, current это div то, что должно быть показано, и selected это элемент, который должен исчезнуть, хотя мне нравится ваше предложение о смене имен переменных, если это делается по всему файлу.

Ответ №3:

Изменение параметра отображения в HTML на <div id="txt2" class="carousel_item" style="display: none; "> должно корректно вызвать затухание.

~~Вам также может потребоваться изменить jQuery на: $( ".carousel_item:nth-child(" selected ")" ).fadeOut(600).hide();~~

Вы вызываете fadeIn / fadeOut для элементов, для которых оба значения равны display: block . Для работы ему нужны альтернативные состояния.

ОБНОВИТЕ После загрузки локальной копии вашего сайта, изменив функцию showhide() в вашем js на:

 var inc = 1
function showhide(current) {
    if (inc == 1) current = 2;
    $( ".carousel_item:nth-child("   selected   ")" ).fadeIn(600);
    $( ".carousel_item:nth-child("   current   ")" ).fadeOut(600).hide();
    selected = current;
    inc  ;
}

работает в моем тестировании. Надеюсь, у вас это работает. Я добавил счетчик, поскольку ваш первоначальный счетчик, похоже, устанавливает оба selected и current в 1.

1. для всех разделов с классом .carousel_item уже установлено значение display: none; во внешнем файле css. свойство отображения изменяется на block только после вызова fadeIn для этого конкретного div. я также попытался установить значение inline, не решив проблему.

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