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