CODEWITHSUNDEEP
jquerycssjquery-ui-slider
WASasquatch
WASasquatch

Reputation: 619

jquery slider not transitioning smooth

Thanks to Christiaan Scheermeijer I got the slider to transition correctly. But now it seems the focus of the images is off. Do I need to use z-index or something to get the slides to smooth properly? Currently the only one that "fades" like it should, is slide 4, transitioning back to slide 1. I'm really puzzled. I tried timing on the fades, which doesn't seem to be the problem. It seems like the 'next slide' is just popping into the foreground over the slide it should be fading from.

http://jsfiddle.net/WASasquatch/haBAS/2/

$('#hi1').fadeTo("slow", 1.0);
var slide = 0,
slides = 4,
ids = [
    '#hi1',
    '#hi2',
    '#hi3',
    '#hi4', ];
slideShow = setInterval(function () {
    var nextSlide = slide + 1;
    if (nextSlide > slides - 1) {
        nextSlide = 0;
    }
    $(ids[nextSlide]).fadeTo(100, 1.0);
    $(ids[slide]).fadeTo(1200, 0);
    slide++;
    if (slide > slides - 1) {
        slide = 0;
    }
}, 5000);

Upvotes: 1

Views: 697

Answers (1)

Eric S
Eric S

Reputation: 1363

Please try this.

Change:

$(ids[nextSlide]).fadeTo(100, 1.0);
$(ids[slide]).fadeTo(1200, 0);

To:

$(ids[slide]).fadeTo(300, 0);
$(ids[nextSlide]).fadeTo(2300, 1.0);

And add to the #container CSS rule:

background-color: #000;

Also, you might consider this change too (though it's not necessary to get it working - it will simplify your code).

Change:

slide++;
if (slide > slides - 1) {
    slide = 0;
}

To:

slide = nextSlide;

(You've already calculated what the next slide will be, you can just use it instead of recalculating and then checking bounds.)

One other suggestion would be to consider using ids.length where you have slides, and remove the slides var - reason this might make sense is to that if you decide to add or remove slides in the future, you don't have to remember to also update the slides count - it will just work with however many you've specified in the ids array.

Consider this JSFiddle.

Upvotes: 2

Related Questions