Question

I am having an issue that is stumping me. I have a relatively simple slider with three divs. When I click through to the second div the first time, the third div overlaps the first (even though the inspected CSS shows that it shouldn’t be there). This happens in every browser I’ve tested on from Safari 5.1, Chrome 10.x and FireFox 4.0.1. Subsequent animations seem to work fine, browsing back and forth. Why would it work incorrectly on first load? My code seems to be correct. Is it a bug?

There is a lot of animations happening on this page at once. After browsing back and forth through the “tabs”, the animation (roundabout plugin) breaks. This also seems to be happening randomly.

This is the page in question.

    $(".overview").click( function() {
    $("#overview").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").animate({
        left: '1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").animate({
        left: '2000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    return false;
});

$(".keynote").click( function() {
    $("#overview").animate({
        left: '-1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").removeClass("hidden").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").animate({
        left: '1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    return false;
});

$(".comparison").click( function() {
    $("#overview").animate({
        left: '-2000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").removeClass("hidden").animate({
        left: '-1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").removeClass("hidden").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    return false;
});

(the easing doesn’t seem to work either – so that’s really three problems in one).

UPDATE: Fixed it myself. See answer below.

Answer 1

Fixed it myself. The clue was in the CSS and having to make use of conditional statements:

#overview {
left: 0px;
}

#keynote {
    left: 1000px;
}

#comparison {
    left: 2000px;
}

jQuery:

    $(".overview").click( 
function() {
if ($("#overview").css("left") != "0px" ) {
    $("#overview").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").animate({
        left: '1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").animate({
        left: '2000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')

}
return false;
});



$(".keynote").click( 
function() {
if ($("#keynote").css("left") != "0px" ) {
    $("#overview").animate({
        left: '-1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").removeClass("hidden").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").animate({
        left: '1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')

}
return false;
});



$(".comparison").click( 
function() {
if ($("#comparison").css("left") != "0px" ) {
    $("#overview").animate({
        left: '-2000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").removeClass("hidden").animate({
        left: '-1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").removeClass("hidden").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')

}
return false;
});