Question

i have created a slideshow, using jquery which has fade effect, the problem with the slideshow is if i add image, it shows properly, but if i add text instead of image, the text bounce bottom to top, i want it to be fixed on top. Actually the issue is likely because, what i am doing is, i have six li i am enabling first li and disabling rest, now i am giving the fadeout effect to first li and fadein effect to next li, now by the time the first li fades out and next li fades in, at that time, the text bounces, but i dont understand why this does not happens with image, here is my complete code.

You can download full project and view

Currently the div contains image, if you replace that with h1 element you can see the erroneous output

Answer 1

So using jquery.cycle, setting a fade effect is as simple as below. You HTML should look something like:

<div id="slideshow">
    <div class="slide">
        <p>Some text</p>
        <img ... />
    </div>
    <div class="slide">
        <p>Some text</p>
        <img ... />
    </div>
    <!-- more slides ... -->
</div>

Then your javascript is:

$('#slideshow').cycle({
    fx:'fade',
    slideExpr: '.slide'
});

The fade effect (fx) is a standard one within the cycle plugin. slideExpr defines a jquery selector to select the slide elements within the main (in this case #slideshow) wrapper for your slides.