используя плагин jquery цикл, анимация элементов в слайде после вращения - PullRequest
Новая
       21

используя плагин jquery цикл, анимация элементов в слайде после вращения

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

Я создал слайд-шоу, используя цикл jquery, и каждый из слайдов div содержит дочерние div, содержащие изображения и текст, и мне было интересно, можно ли анимировать текст в одном из дочерних div после отображения каждого слайда с помощью 'onAfter. По сути, мне было интересно, можно ли анимировать что-либо внутри div слайд-шоу после завершения слайда. Кажется, я не могу заставить что-либо произойти или быть анимированным после показа слайда. 

//Run the slide show:
$('#slide').cycle({ 
    fx:     'fade', 
    timeout: 1000, 
    after: onAfter,
});

//function to animate element within the '#slide' div after slide is rotated in
function onAfter() { 
   $('#slide div .right').animate({
   easing: 'linear',
   //shrink the font size down
   fontSize : '18px',
}, 2000, function() {
   // Animation complete.
});
};

Вот HTML: 

    <div id="slide">
    <div><!--slide 1-->
    <div class="left"><img src="images/theimage1.jpg" alt="An Image" /></div>
    <div class="right">this is the text I want to animate once the slide is shown</div>
    </div>

    <div><!--slide 2-->
    <div class="left"><img src="images/theimage2.jpg" alt="An Image" /></div>
    <div class="right">animate more text once this slide is displayed</div>
    </div>

    <div><!--slide 3-->
    <div class="left"><img src="images/theimage3.jpg" alt="An Image" /></div>
    <div class="right">animate this text when slide 3 is shown</div>
    </div>

    </div><!--end #slide -->

вот CSS: 

    <style type="text/css" media="all">
    #slide { width: 950px; border: none; background-color: #fff;  }
    #slide div { width: 100%; }
    #slide div .left    {float: left; width: 350px; padding: 0;}
    #slide div .right   {float: right; color: #666; font-size: 40px; width: 560px; }
    </style>

1 Ответ

1 голос
/ 22 февраля 2012

Я нашел решение, которое работает, хотя, возможно, это не оптимальное решение.

Похоже, что предоставленный вами код был практически всем, что вам нужно.Как это работает у меня для первого слайда, но не для последующих слайдов.Причина в том, что функция onAfter выбирает все div ".right" для анимации.Следовательно, при первом запуске все div ".right" находятся в их окончательном состоянии, поэтому повторный запуск не имеет никакого эффекта (вы говорите каждому анимировать от 18 до 18 пикселей).В этом случае ключ заключается в том, чтобы восстановить исходный размер текста, чтобы его можно было сжать, но только для следующего слайда.

Чтобы сделать это, вы можете использовать обратные вызовы плагина «до» и «после»каждый из них отправляет несколько параметров, которые включают в себя «currSlideElement» и «nextSlideElement» в качестве первых двух параметров (вы можете увидеть, как я включил их в код ниже).Сначала короткое замечание: хотя обратный вызов «after» вместо этого получает предыдущий элемент и текущий элемент, а не текущий и следующий, как указано в документации плагина.Я не уверен, является ли это ошибкой в ​​плагине или опечаткой в ​​документации, или, возможно, (более вероятно), я просто что-то неправильно понимаю.В любом случае, мы можем заставить его работать ...

Так что единственные изменения заключаются в следующем: я добавил обратный вызов перед слайд-шоу: 

$('#slide').cycle({ 
    fx:     'fade', 
    timeout: 5000,
    before: onBefore,
    after: onAfter
});

И вот обратные вызовы:

function onBefore(currentElement, nextElement) {
    $(nextElement).find('.right').css({fontSize: '40px'}); // reset css for upcoming text
}

function onAfter(previousElement, currentElement) {
    // Note: Plugin documentation says parameters should be (currentElement, nextElement), but that doesn't seem to be the case! 
    $(currentElement).find('.right').animate({fontSize: '18px'}, 2000); // animate current text
};

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

Приветствия.

...