jquery - jQuery 和不同浏览器的问题

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，但它有效)。
其他浏览器: 它改变了 x 的值，但不改变 left 属性。alert(x) 按原样抛出 1 但 left 属性抛出 NaN，点击 10 次后，它开始正常工作，但它仍然抛出 NaN。
第二个问题:
CSS 过渡。
我想让我的画廊变得漂亮和生动，所以我使用了 CSS transition 属性并将其设置为 1second;。它工作正常，需要 1 秒来更改页面。所以它很好地改变了 left 属性，例如从 800px 到 1600px。但是当我第二次点击我的箭头时，第一个动画还没有完成，它会在第二个设置的值上增加或减去另一个 800 像素。例如，我点击，它从 800 变为 1600，但是当我点击左值大约 500 像素时，它增加了 800 像素，左值现在是 1300 像素，我的画廊看起来不像它应该的那样。有什么方法可以阻止我的 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

但实际上你应该计算页数并乘以索引 * 800 以获得你的位置