Sliding text overlapping

Question

Hi. Having a slight issue with a slider plugin for Wordpress I am creating. I'm trying to get the text to slideUp at the beginning and slideDown just before the transition to the next image. This appears to work fine however after a few transition the slider that fades (top one) text starts to overlap; the text from the next image shows before the slide has changed.

And the code segment:

http://pastebin.com/3WxgRWdg

Thanks to anyone that can help. Really would appreciate it. Matthew.

Answer 1

It's because of your animation for the other one, check out the complete function:

var text = '.lof-main-item-desc';
$(text).slideUp(200);
this.wrapper.stop().delay(200).animate(obj, {
    duration: this.settings.duration,
    easing: this.settings.easing,
    complete: function() {
        $(text).slideDown(200);
    }
});

What this is doing is finding all .lof-main-item-desc and affecting them whether they're in another slideshow or not. You need to make it affect only the ones in the current show by only looking within this wrapper when sliding both directions, like this:

var text = '.lof-main-item-desc';
$(this.wrapper).find(text).slideUp(200);
this.wrapper.stop().delay(200).animate(obj, {
    duration: this.settings.duration,
    easing: this.settings.easing,
    complete: function() {
        $(this).find(text).slideDown(200);
    }
});