CODEWITHSUNDEEP
jquerytextoverlapslide
Matthew Ruddy
Matthew Ruddy

Reputation: 111

Sliding text overlapping

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.

Upvotes: 1

Views: 1308

Answers (1)

Nick Craver
Nick Craver

Reputation: 630349

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

Upvotes: 1

Related Questions