Question

我遇到的问题让我很难过。我有一个相对简单的滑块有三个div。当我第一次点击第二个div时，第三个div与第一个div重叠（即使被检查的CSS显示它不应该在那里）。这种情况发生在我在Safari 5.1，Chrome 10.x和FireFox 4.0.1上测试的每个浏览器中。后续动画似乎工作正常，来回浏览。为什么第一次加载时它会不正确？我的代码似乎是正确的。这是一个错误吗？

此页面上同时发生了很多动画。在“标签”中来回浏览后，动画（环形插件）会中断。这似乎也是随机发生的。

This是相关网页。

    $(".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，etcetera默认为左值。

第一次正确滑动jQuery幻灯片的动画

2 个答案: