CODEWITHSUNDEEP
jqueryjquery-animatejquery-cycle
deeholzman
deeholzman

Reputation: 189

using jquery cycle plugin, animating elements within the slide after rotation

I've created a slideshow using jquery cycle, and each of the slide divs contain child divs that contain images and text, and was wondering if it's possible to animate the text in one of the child divs after each slide is displayed using 'onAfter'. Basically I was wondering if it's possible to animate anything within a slideshow div once the slide is complete. I can't seem to get anything to happen or to be animated once a slide is displayed.

//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.
});
};

Here's the 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 -->

here's the 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>

Upvotes: 2

Views: 2844

Answers (1)

Synexis
Synexis

Reputation: 1427

I found a solution that works, albeit it's probably not the optimal solution.

It looks like the code you provided was pretty much all you needed. As is, it worked for me for the first slide but not subsequent slides. The reason is that the onAfter function selects all ".right" divs to animate. Consequently, the first time it's run all the ".right" divs are in their final state, so running it again has no effect (you're telling each one to animate from 18px to 18px). The key, then, is to reset the text to it's original size so it can be shrunk, but only for the upcoming slide.

To do this, you can use the plugin's "before" and "after" callbacks each send several parameters, which include "currSlideElement" and "nextSlideElement" as the first two parameters (you can see how I incorporate these in the code below). First a quick side note, though: The "after" callback seems to instead receive the previous element and the current element, rather than the current and next as the plugin's documentation states. I'm not sure if this is a bug in the plugin or a typo in the documentation, or perhaps (more likely), I'm just misunderstanding something. Either way, we can get it to work...

So the only changes are as follows: I added a before callback to the slideshow:

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

And here are the callbacks:

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
};

Hope that helps (and excuse me if I over-explained... hopefully it will help other readers if anything).

Cheers.

Upvotes: 1

Related Questions