Safari中留下jquery动画的问题

Posted 2023-05-08

【中文标题】Safari中留下jquery动画的问题

【英文标题】：Problems with jquery animate left in Safari

【发布时间】：2013-08-19 05:59:29

【问题描述】：

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

我对 javascript 或 jquery 不是很好，所以我在学习这方面有点困难，但我的滑块可以在 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 的一部分，并且在单击左右箭头时会按照它们的宽度移动。锚链接工作正常。

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

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

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

编辑

好的，所以我现在知道 Safari 中的动画百分比是错误的，所以现在我知道是百分比导致了不稳定的行为。进一步挖掘让我了解了这段代码：

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

这可行，但显然在调整浏览器大小时表现不如我想要的那样。是否有任何解决方法可以使百分比在 Safari 中起作用，或者是否有一种方法可以使像素计算的东西只针对 Safari？意识到我可能在这里抓着稻草？！哈。

【参考方案1】：

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

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

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