Анимированное содержание слайдов jQuery Cycle - PullRequest
Новая
       6

Анимированное содержание слайдов jQuery Cycle

2 голосов
/ 07 февраля 2012

Каждый слайд состоит из поля для заголовка и изображения. 

<div id="slideshowWindow">

    <div id="One" class="slide">
        <div class="slideTitle">
            <h2>First title</h2>
        </div>
        <img src="/image.jpg" />
    </div>

    <div id="Two" class="slide">
        <div class="slideTitle">
            <h2>Second title</h2>
        </div>
        <img src="/image2.jpg" />
    </div>

</div>

Я пытаюсь добавить вторичную анимацию в каждый слайд, чтобы поле заголовка начинало смещаться от изображения и в то же время весь слайд удалялся (с анимацией Цикл по умолчанию). Требуемый эффект виден на домашней странице сайта IBM (http://www.ibm.com). Я пытаюсь использовать обратные вызовы Cycle «после» и «до»: 

$(document).ready(function() {
    $('#slideshowWindow').cycle({
        fx: 'scrollHorz',
        timeout:  5000,
        after: onAfter,
        before: onBefore
    });
});

function onAfter(cycle) {        
    $(".slideTitle").delay(200).animate({marginLeft:"10px"}, 200 );        
};

function onBefore(cycle) {        
    $(".slideTitle").animate({marginLeft:"-400px"}, 100 );        
};

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

Ответы [ 3 ]

2 голосов
/ 14 ноября 2012

Это на самом деле будет работать немного лучше. 

function onBefore(cycle) {        
  $(this).children("section.text").delay(300).animate({marginLeft:"35%"}, 1500);
};

function onAfter(cycle) {        
  $(this).children("section.text").delay(1300).animate({marginLeft:"-1400px"}, 1400);
};
0 голосов
/ 29 мая 2012

На пару месяцев позже, но, надеюсь, это может помочь другим:

Вы можете использовать текущий элемент, чтобы найти его правильных потомков 

function onAfter(cycle) {        
  $(this).children(".slideTitle").delay(200).animate({marginLeft:"10px"}, 200);
};

function onBefore(cycle) {        
  $(this).children(".slideTitle").css("marginLeft", "-400px");
};
0 голосов
/ 07 мая 2012

Лучший способ сделать это - создать свой собственный переход и анимировать заголовок как его часть.Это требует немного больше работы, чем использование onAfter и onBefore, которое в данном случае не сработает.

Вот пример, который должен помочь вам начать: http://return -истина.ком / 2012/03 / создание мини-заказ титр-переход-для-Jquery цикла /

...