动画未能正确触发jQuery幻灯片第一次

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

检查是否已设置动画上使用的所有参数。 示例：默认情况下，概览，比较，keynote等等具有左值。