Question

我正在尝试创建一个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中不起作用并指向正确的方向，那么我们将非常感激！在我找到的答案的砖墙上，并不知道接下来该做什么。谢谢。

修改

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

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

哪个有效，但显然在调整浏览器大小时表现得不怎么样。是否有任何解决方法可以使百分比在Safari中运行，或者只是将像素计算的东西作为目标Safari？意识到我可能正抓着稻草在这里？！哈

Answer 1

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

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

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

在Safari中留下jquery动画的问题

1 个答案: