- jQuery's css方法中的运算符在IE8中不工作

-= operator in jQuery's css method not working in IE8

本文关键字：运算符 IE8 工作 方法 jQuery css      更新时间：2023-09-26

由于某种原因，看起来jQuery在css()中对-=的处理在IE8中不起作用。下面的代码没有出现任何错误，但也不能正常工作。我已经把范围缩小到上面提到的那个操作符了。

var postCount = $(".postsWrapper .window .posts article").length;
var numberOfPages = Math.ceil(postCount / 3);
var currentPage = 1;
var transitioning = false;
$(".postsWrapper button").click(function() {
    var direction = $(this).attr("data-direction");
    var postWindowWidth = $(".postsWrapper .window").width();
    if (direction == "next" && currentPage < numberOfPages && transitioning == false) {
        transitioning = true;
        // the below line does nothing in IE8
        $(".postsWrapper .window .posts").css("marginLeft", "-=" + postWindowWidth);
        setTimeout(function() {
            transitioning = false;
        }, 1000);
        currentPage++;
    } else if (direction == "previous" && currentPage > 1 && transitioning == false) {
        transitioning = true;
        // the below line does nothing in IE8
        $(".postsWrapper .window .posts").css("marginLeft", "+=" + postWindowWidth);
        setTimeout(function() {
            transitioning = false;
        }, 1000);
        currentPage--;
    }
});

见http://www.weblinxinc.com/beta/candy-controls/demo/site/index.htm

问题是，你的margin-left属性是开始与值auto，所以jQuery不能增加/减少它。实例(来源如下)

如果你最初将它设置为一个数值，它将开始工作。生活例子

这可能是一个jQuery bug，你可以检查他们的列表，看看它是否存在。

下面是实际示例的源代码:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <div id="test">I'm the test div</div>
<script>
  (function() {
    "use strict";
    // The following line is only in the second example, the one that works;
    // without it, it doesn't work (in IE8) even though it does in Chrome
    $("#test").css("marginLeft", 0);
    var counter = 0;
    var up = true;
    display("Initial marginLeft: " + $("#test").css("marginLeft"));
    setInterval(function() {
      if (up) {
        $("#test").css("marginLeft", "+=5");
      } else {
        $("#test").css("marginLeft", "-=5");
      }
      ++counter;
      if (counter > 10) {
        counter =0;
        up = !up;
      }
    }, 200);
    function display(msg) {
      $("<p>").html(String(msg)).appendTo(document.body);
    }
  })();
</script>
</body>
</html>
相关文章：