CODEWITHSUNDEEP
jqueryslideshowjquery-cycle2
lcsabre
lcsabre

Reputation: 21

jQuery cycle2 'cycle-before/after' only works on first transition

This is regarding Cycle2: http://www.malsup.com/jquery/cycle2/

I have a slideshow that has an image and a description div of content. The goal is to have the description fade in AFTER the image transitions in first. I am trying to use the 'cycle-before' and 'cycle-after' to achieve this.

$('#slider').cycle({
    slides: '>li',
    timeout: 5000
});
$('#slider').on( 'cycle-before', function( event, opts ) {
    $('.descriptiontext').fadeOut(); 
});
$('#slider').on( 'cycle-after', function( event, opts ) {
    $('.descriptiontext',this).delay(1000).fadeIn(1000);
});

But I don't think I understand how to use this feature. On my actual version, only the first transition has the delay for the description. On the following Fiddle example, it does not work at all. Help!

http://jsfiddle.net/56wQY/1/

Upvotes: 1

Views: 4719

Answers (1)

lcsabre
lcsabre

Reputation: 21

I copied all of the params and just used the incoming, outgoing slides as provided. I am sure there is a less verbose way to do this, but at least it works.

$('#slider').cycle({
    slides: '>li',
    timeout: 5000
});

$('#slider').on( 'cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('.descriptiontext',outgoingSlideEl).fadeOut(); 
});

$('#slider').on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('.descriptiontext',incomingSlideEl).delay(1000).fadeIn(1000);
});

Upvotes: 1

Related Questions