jquery - Safari 中留下的 jquery animate 问题

Question

我正在尝试创建一个 100% 宽度/高度的内容“ slider ”，它使用按钮和 anchor 链接跳转到幻灯片。

我不太擅长 javascript 或 jquery，所以我正在学习这个，但我已经让 slider 可以在 Chrome 和 Firefox 中工作，但在 Safari 中遇到了巨大的问题。代码如下:

var $proj = $('div.project') //Cache your DOM selector
    visible = 1, //Set the number of items that will be visible
    indexProject = 0, //Starting index
    endIndexProject = 9; //End index 

$('.workR').click(function(){
     if(indexProject < endIndexProject ){
       indexProject++;
      $proj.animate({'left':'-=9.0909%'});
    }
});

$('.workL').click(function(){
     if(indexProject > 0){
       indexProject--;            
      $proj.animate({'left':'+=9.0909%'});

    }
});

/* sub project nav */


$("#one").click(function(e) {
    indexProject = 0;
    $proj.animate({'left':'0%'});    
});

$("#two").click(function(e) {
    indexProject = 1;
    $proj.animate({'left':'-9.0909%'});    
});

$("#three").click(function(e) {
    indexProject = 2;
    $proj.animate({'left':'-18.181334059343435%'});      
});

$("#four").click(function(e) {
    indexProject = 3;
    $proj.animate({'left':'-27.272243150252528%'}); 
});

$("#five").click(function(e) {
    indexProject = 4;
    $proj.animate({'left':'-36.363152241161615%'}); 
});

$("#six").click(function(e) {
    indexProject = 5;
    $proj.animate({'left':'-45.454143287515365%'});   
}); 

$("#seven").click(function(e) {
    indexProject = 6;
    $proj.animate({'left':'-54.544854594875545%'});
});

$("#eight").click(function(e) {
    indexProject = 7;
    $proj.animate({'left':'-63.63566105915084%'});
});

$("#nine").click(function(e) {
    indexProject = 8;
    $proj.animate({'left':'-72.72647748412166%'});
});

$("#ten").click(function(e) {
    indexProject = 9;
    $proj.animate({'left':'-81.81728394679116%'});
}); 

基本上所有项目 div 都是一个非常长的 div 的一部分，并且通过单击左右箭头按其宽度移动。 anchor 链接工作正常。

在第一张幻灯片上，单击向右箭头会重复显示第二张幻灯片，然后向左箭头不会返回到第一张幻灯片，而是会转到空白屏幕，因为现在位于 style="left: -72.72099260025185 %;”而不是回到零。

在检查代码时的第二张幻灯片上，并非所有幻灯片都沿着相同的百分比移动，而是它们都以稍微不同的百分比移动。

如果有人能解释为什么这在 Safari 中不起作用并为我指明正确的方向，我将不胜感激!我找到的答案有点像砖墙，不知道下一步该做什么。谢谢。

编辑

好吧，我现在知道在 Safari 中动画百分比是有问题的，所以现在我知道是百分比导致了不稳定的行为。进一步的挖掘让我找到了这段代码:

percent = 0.90909; 
add_width = (percent*$proj.parent().width())+'px';
$proj.animate({'left': '-='+add_width}, 500);

它可以工作，但显然在调整浏览器大小时表现得不太像我想要的那样。是否有任何解决方法可以使百分比在 Safari 中工作，或者有一种方法可以使像素计算的内容针对 Safari？意识到我可能在这里捕获了救命稻草吗？!哈。

Answer 1

我知道这个问题已经很老了，但是由于没有人回答，而且我刚才在 Safari 中遇到了类似的问题...如果你的父容器是 100% 宽度并且该宽度与视口(viewport)大小相同(浏览器窗口宽度)...那么你可以使用这个:

$proj.animate({'left': '-=100vw' }, 500); //Where 100vw is 100% of the viewport width.  

如果您的父容器没有视口(viewport)那么宽，您会遇到问题，但在大多数情况下，通过一些快速数学计算，您可以弄清楚计算结果可能是什么。无论如何，您可以在这里找到更多有用的信息:http://caniuse.com/#feat=viewport-units