jQuery Cycle Plugin Help

Question

I am trying to build a sliding rotator with jQuery Cycle plugin but am having some trouble with a custom display that I need...Basically I have the slides and on top of each slide there is a textbox with text. I just want the slides to slide but I want the text to fadeout and then in when the new slide comes in.

Here is my HTML:

<div id="home-slider">
     <div class="slide">
          <img src="image.jpg" width="200" height="200" />
          <div class="text-box">
               <p>Some text here</p>
          </div>
     </div>
     <div class="slide">
          <img src="image.jpg" width="200" height="200" />
          <div class="textblock">
               <p>Some text here</p>
          </div>
     </div>
</div>

Here is the JS:

function onBefore() {
    jQuery("#home-slider .slide .textblock").hide();    
}
function onAfter() { 
    jQuery("#home-slider .slide .textblock").fadeIn('fast');
}
jQuery("#home-slider").cycle({
        speed:  500, 
        timeout: 3000,
    after:   onAfter,
    before: onBefore

});

So the slides are working fine but the text are sliding with it when I want them to just fade in/out instead.

Any idea?

Answer 1

For sliding you have to set the fx property either to 'scrollHorz or scorllVert. Take a look at this working demo. Aslo you have some typo's in your class names.

Demo

Answer 2

I believe what is happening is that the slide div is already hidden, so onbefore doesn't have any effect as it is shown afterwards.

One way around this could be to use text-indent to have it off the screen and then hide it onafter, reposition the text correctly and then fade in.

Another option is to have a div overtop the text to hide it and then hide the below text onafter and remove the div and fade in.

A third option is to choose only the images in the cycle function. jQuery("#home-slider img").cycle or if that doesn't work, then have them in a separate div to cycle through.

Answer 3

You are missing the "#" in your jquery calls and its called text-box in one section of your html:

function onBefore() {    
  jQuery("#home-slider .slide .text-box","#home-slider .slide .textblock").hide(); 
}
function onAfter(curr, next, opts) {     
  jQuery("#home-slider .slide .text-box","#home-slider .slide .textblock").fadeIn('fast');    
  jQuery("#home-slider .slide").css("zIndex","");
}