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

На 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.


jquery slideshow fadein fadeout
person tiny sauce    schedule 08.06.2011    source источник
comment
Можете ли вы предоставить несколько строк кода из вашего приложения?   -  person Dan Croak    schedule 08.06.2011
comment
не могли бы вы удалить комментарий о затухании, чтобы мы могли его протестировать   -  person mightyplow    schedule 08.06.2011
comment
рассматриваемый код теперь работает. извините за это :Р   -  person tiny sauce    schedule 08.06.2011

Ответы (3)


arrow_upward
1
arrow_downward

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

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

person tiny sauce    schedule 08.06.2011

arrow_upward
0
arrow_downward

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

person mightyplow    schedule 08.06.2011
comment
нет, current — это div, который должен отображаться, а selected — это элемент, который должен исчезнуть, хотя мне нравится ваше предложение поменять имена переменных, если это делается во всем файле. - person tiny sauce; 08.06.2011

arrow_upward
0
arrow_downward

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

Вам также может понадобиться изменить 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.

person g_thom    schedule 08.06.2011
comment
все элементы div с классом .carousel_item уже настроены на отображение: нет; во внешнем css-файле. свойство display изменяется на block только после того, как для этого конкретного div был вызван fadeIn. я также попытался установить значение в строке, не решив проблему. - person tiny sauce; 08.06.2011
comment
это предложение сработало для меня. единственная проблема заключается в том, что если в слайд-шоу добавить больше элементов (контролируемых клиентом), оно не будет работать. так что ваше решение было правильным, учитывая информацию, которая у вас была. окончательное решение обсуждалось выше. - person tiny sauce; 08.06.2011