Как я могу остановить анимацию jquery в моем слайд-шоу

Я использую функцию слайд-шоу фотографий jquery, которую я нашел в Интернете. Он содержит элемент div, который использует эффект аккордеона для отображения имени отображаемой в данный момент фотографии. Однако клиент не хочет, чтобы div «скользил» вниз. Он хочет, чтобы он был статичным, но при этом загружал текущий заголовок фотографии по мере их продвижения. У меня есть пример здесь.

Я попытался войти в файл js и прокомментировать части, которые, как я думал, вызывают анимацию в div, но это не дало никакого эффекта. Любые идеи о том, как я могу остановить анимацию jquery на одном конкретном div в моем примере?


jquery slideshow jquery-animate
person Diventare Creative    schedule 13.01.2011    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Я не уверен, куда бы вы это поместили, но вот как вы это делаете.

$('#divName').stop()
person Diodeus - James MacFarlane    schedule 13.01.2011
comment
Это имеет смысл, Диодей, и спасибо. Проблема в том, что я боюсь, что могу остановить ВСЕ анимации на странице, и я имею в виду остановить только одну ее часть. - person Diventare Creative; 14.01.2011

arrow_upward
1
arrow_downward

попробуйте изменить это:

$(items[currNo]).fadeIn((timeOut / 6), function() {
    if ($(itemsSpan[currNo]).css('bottom') == 0) {
        $(itemsSpan[currNo]).slideUp((timeOut / 6), function() {
            faderStat = false;
            current = items[currNo];
            if (!mOver) {
                fadeElement(false);
            }
        });
    } else {
        $(itemsSpan[currNo]).slideDown((timeOut / 6), function() {
            faderStat = false;
            current = items[currNo];
            if (!mOver) {
                fadeElement(false);
            }
        });
    }
});

к этому:

$(items[currNo]).fadeIn((timeOut / 6), function() {
            faderStat = false;
            current = items[currNo];
            if (!mOver) {
                fadeElement(false);
            }
});
person Andy    schedule 13.01.2011
comment
Я не заметил изменений, Энди. Но спасибо, что указали мне правильное направление. Я не был уверен, какой файл js я должен иметь в виду, и вы показали мне выше, что это был s3Slider.js. - person Diventare Creative; 14.01.2011

arrow_upward
1
arrow_downward

Хорошо. Я нашел обходной путь, который работает для меня, если вы используете s3Slider.js, я думаю, что это связано с расчетом timeOut в s3Slider.js... на странице с изображениями выполните следующие действия:

$(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 12000 // --> сделайте его кратным 6000, и он будет плавным. Тестировалось только с 6000 и 12000 }) ; });

person Celeste    schedule 04.01.2013

arrow_upward
0
arrow_downward

С помощью Энди и Диодеуса я думаю, что я намного ближе, чем был :) Мне удалось узнать, что я могу давать разные команды функциональным строкам в файлах jquery, таких как

$(itemsSpan[currNo]).fadeIn((timeOut/6), function() {

Теперь я знаю, что могу заменить .slideDown чем-то вроде .fadeIn и получить разные эффекты. Хотя я смог изменить imageSpan (который представляет собой просто поле с заголовком фотографии) со скольжения на затухание, я все еще не смог заставить его просто «сидеть» там и ничего не делать. Я надеюсь, что клиенту понравится затухание, и он остановится на этом :)

person Diventare Creative    schedule 14.01.2011