Question

我使用基本的CSS，HTML和jQuery制作了简单的画廊，但它有很少的错误，我无法弄清楚什么是错的。它在Firefox中运行良好，但在其他浏览器中不行。这是代码

$(document).ready(function(){

 var x=0; var lava=0;
  //right arrow
$("#p_sipka").click(function(){
  if(x<9){
          x++; //used as a "position counter"
          lava = parseInt($("#slider").css("left"), 10); //parse a value of slider css.left property into var lava
          lava=lava-800; //substract 800 (pixels) - WORKS FINE IN FIREFOX, THROWS NaN in other browsers
          $("#slider").css("left",lava);  //set new value to slider
         }
  else if(x==9){
                $("#slider").css("left","0px");
                x=0;
               }    
});

第一个问题： 它应该移动宽度为8000px的slider div，一个宽度为800px的页面，所以要向左或向右移动图库我通过单击箭头更改slider div的左侧属性。我试着以某种方式调试它。
Firefox 首先，x的值为0然后，当我点击右箭头（顺便说一句左箭头在任何浏览器中都能正常工作）时，x的值为1， left属性更改为-800（不，不是800px，因为我必须使用parseInt，但它有效）。
其他浏览器：它更改{{1}的值但是不要改变左边的属性。x会抛出alert(x)，但是1属性会抛出NaN，并且在10次点击后，它会开始工作，但它仍会抛出left {1}}。
第二个问题：
CSS过渡。
我想让我的画廊变得漂亮和动画，所以我使用CSS NaN属性并将其设置为transition。它工作正常，更改页面需要1秒。所以它很好地改变了左边的属性，例如800px到1600px。但是当我第二次点击我的箭头时，第一个动画尚未完成，它会将另外800个像素添加或减去一个在此秒内设置的值。例如，我点击它，它从800变为1600但当我点击左边的值约为500px时，它会增加800px，左边的值现在是1300px，而我的图库看起来不应该。有没有办法阻止我的jQuery代码再次运行，直到第一个动画完成？

这是完整的代码 http://jsfiddle.net/QuyjZ/

Answer 1

第一个问题

 lava = parseInt($("#slider").css("left").replace(/px$/i,""), 10)

第二个问题......

lava = math.Ceil(parseInt($("#slider").css("left").replace(/px$/i,""), 10)/800)*800

但事实上你应该计算页数而不是＆amp;乘以指数* 800以获得您的位置

jQuery和不同浏览器的问题

1 个答案: