第一次在jQuery幻灯片上没有正确触发动画

Question

我有一个问题难住了我。我有一个相对简单的滑动条，有三个div。当我第一次点击第二个div时，第三个div与第一个div重叠(尽管检查过的CSS显示它不应该在那里)。从Safari 5.1到Chrome 10，我测试过的所有浏览器都会出现这种情况。x和FireFox 4.0.1。随后的动画似乎工作良好，浏览来回。为什么它在第一次加载时工作不正确?我的代码似乎是正确的。是bug吗?

有很多动画同时发生在这个页面上。通过"标签"来回浏览后，动画(迂回插件)中断。这似乎也是随机发生的。

就是这一页。

    $(".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;
});

(放松似乎也不起作用-所以这实际上是三个问题在一起)。

更新:修复它自己。

Answer 1

自己修复线索在CSS中，必须使用条件语句:

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

Answer 2

检查动画中使用的所有参数是否已设置。示例:overview, comparison, keynote等默认为左值