Question

我用jQuery创建了一个动画，它附在这个问题上。问题是动画在以下浏览器中看起来与预期不同（见下图）：

Firefox 49.0
Safari 10.0

我还试过其他一些浏览器，动画看起来像一样（见下图）：

Chrome版本53.0.2785.143
Opera 40.0.0.230817323

似乎 jQuery为元素提供了略微不同的位置 （M1，M2，..）。如果您查看代码段中的js代码，我会计算从起点到例如的航点。 M1盒子。此信息存储在pathsFromStartToMachines数组中。如果我将计算出的航路点记录到M1框中，我会得到略有不同的结果，具体取决于浏览器。

火狐 - [0] left: 140px top: 143px - [1] left: 225px top: 143px
铬 - [0] left: 140px top: 143px - [1] left: 228px top: 143px

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.machineWidth = Number($('.machine').css('width').replace(/px/, ""));
  $scope.machineHeight = Number($('.machine').css('height').replace(/px/, ""));
  //regex transform string like '343px solid rgb(47,79,79)' into '343'
  $scope.machineBorder = Number($('.machine').css('border').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));
  $scope.machineTotalHeight = Number($scope.machineHeight + 2 * $scope.machineBorder);
  $scope.machineTotalWidth = Number($scope.machineWidth + 2 * $scope.machineBorder);

  $scope.middleLineWidth = Number($('#middleLine').css("width").replace(/px/, ""));
  $scope.middleLineTop = Number($('#middleLine').css("top").replace(/px/, ""));
  $scope.middleLineLeft = Number($('#middleLine').css("left").replace(/px/, ""));

  $scope.thicknessHorizontalLine = Number($('.horizontal').css('border-bottom').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));

  $scope.palletHeight = 10;
  $scope.palletWidth = 30;

  $scope.startPositionMiddleLine = {
    top: $scope.middleLineTop - $scope.palletHeight,
    left: $scope.middleLineLeft
  };

  $scope.machines = [];
  $('.machine').each(function(index) {
    var id = $(this).attr("id");
    var top = Number($(this).css("top").replace(/px/, ""));
    var left = Number($(this).css("left").replace(/px/, ""));
    $scope.machines.push({
      id: id,
      top: top,
      left: left
    });
  });

  //calculate paths from start to each machine
  var pathsFromStartToMachines = [];
  for (var i = 0; i < $scope.machines.length; i++) {
    var id = $scope.machines[i].id;
    var top = undefined;
    if ($("#" + id).hasClass('first-machine-line')) {
      top = $scope.machines[i].top + $scope.machineTotalHeight;
    } else {
      top = $scope.machines[i].top - $scope.palletHeight;
    }
    var left = $scope.machines[i].left + $scope.machineTotalWidth / 2;


    var waypoints = [];
    waypoints.push($scope.startPositionMiddleLine); //starting point middleLine
    waypoints.push({
      top: $scope.middleLineTop - $scope.palletHeight,
      left: left - $scope.palletWidth / 2
    }); //waypoint on middleLine
    waypoints.push({
      top: top,
      left: left - $scope.palletWidth / 2
    });

    var path = {
      id: id,
      waypoints: waypoints
    };
    pathsFromStartToMachines.push(path)
  }

  $scope.pallets = [];

  $scope.createNewPallet = function(type, position) {
    //generate random unique id
    var id = "pallet" + generateId();
    //check if id is not already in use
    while ($scope.pallets.indexOf(id) !== -1) {
      id = "pallet" + generateId();
    }
    //add pallet to DOM
    $('#mainContainer').append('<div class="pallet" id="' + id + '" style="display:none; top:' + position.top + 'px; left:' + position.left + 'px;"></div>');
    $scope.pallets.push(id);

    //pallet fade in
    $('#' + id).fadeIn("50000");
    return id;
  };

  $scope.movePallet = function(palletId, destinationId) {
    //query path to machine. Notice that $.grep returns an array
    var path = $.grep(pathsFromStartToMachines, function(obj) {
      return obj.id === destinationId;
    });
    for (var i = 0; i < path[0].waypoints.length; i++) {
      var waypoint = path[0].waypoints[i];
      $('#' + palletId).animate({
        left: waypoint.left + 'px',
        top: waypoint.top + 'px'
      }, "slow"); //instead of slow you can use e.g. {duration: 2000}
    }
    $('#' + palletId).fadeOut("slow", function() {
      $('#' + palletId).remove();
    });
  };

  $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m1");
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m5");
  }, 1500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m2");
  }, 3000);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m4");
  }, 4500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m3");
  }, 6000);


  function generateId() {
    //generates a random number between 1 and 10000
    return Math.floor((Math.random() * 10000) + 1);
  }
});

#mainContainer > div {
  position: absolute;
}
#mainContainer {
  position: relative;
  width: 700px;
  height: 400px;
  border: 3px solid slategrey;
  background-color: whitesmoke;
}
div.machine {
  width: 60px;
  height: 60px;
  border: 3px solid darkslategray;
  border-radius: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  background-color: lightslategray;
  color: whitesmoke;
  font-family: Verdana, Helvetica, sans-serif;
}
.first-machine-line {
  top: 10%;
}
.second-machine-line {
  top: 50%;
}
#m1 {
  left: 30%;
}
#m2 {
  left: 50%;
}
#m3 {
  left: 70%;
}
#m4 {
  left: 30%;
}
#m5 {
  left: 50%;
}
.line {
  border: 0;
  background: lightgrey;
}
.horizontal {
  border-bottom: 2px dashed dimgrey;
}
.vertical {
  border-left: 2px dashed dimgrey;
}
#middleLine {
  width: 70%;
  top: calc((50% - 10% - 66px) / 2 + 10% + 66px);
  left: 20%;
}
.vertical-line {
  height: calc((50% - 10% - 66px) / 2);
}
.vertical-line-first-machine-line {
  top: calc(10% + 66px);
}
.vertical-line-second-machine-line {
  top: calc(10% + 66px + (50% - 10% - 66px) / 2);
}
#M1toMiddle {
  left: calc(30% + 66px / 2);
}
#M2toMiddle {
  left: calc(50% + 66px / 2);
}
#M3toMiddle {
  left: calc(70% + 66px / 2);
}
#M4toMiddle {
  left: calc(30% + 66px / 2);
}
#M5toMiddle {
  left: calc(50% + 66px / 2);
}
.pallet {
  width: 30px;
  height: 10px;
  background-color: dimgrey;
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div id="mainContainer" class="relative">

    <div class="machine first-machine-line" id="m1">M1</div>
    <div class="machine first-machine-line" id="m2">M2</div>
    <div class="machine first-machine-line" id="m3">M3</div>

    <div class="machine second-machine-line" id="m4">M4</div>
    <div class="machine second-machine-line" id="m5">M5</div>

    <div class="line horizontal" id="middleLine"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M1toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M2toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M3toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M4toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M5toMiddle"></div>

  </div>
</body>

更新：以下是Safari中@ConnorsFan提供的解决方案的屏幕截图（版本10.0）

Answer 1

使用css3代替jquery动画

Answer 2

你可以查看它是什么浏览器并为mozilla添加+ 3px

if($.browser.chrome) {
  //condition
} else if ($.browser.mozilla) {
  //condition
} else if ($.browser.msie) {
  //condition
}

Answer 3

Firefox中未正确报告“machine”div的边框宽度。你应该替换：

$scope.machineBorder = Number($('.machine').css('border').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));

与

$scope.machineBorder = Number($('.machine').css('borderTopWidth').replace(/px/, ""));

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.machineWidth = Number($('.machine').css('width').replace(/px/, ""));
  $scope.machineHeight = Number($('.machine').css('height').replace(/px/, ""));
  //regex transform string like '343px solid rgb(47,79,79)' into '343'
  $scope.machineBorder = Number($('.machine').css('borderTopWidth').replace(/px/, ""));
  $scope.machineTotalHeight = Number($scope.machineHeight + 2 * $scope.machineBorder);
  $scope.machineTotalWidth = Number($scope.machineWidth + 2 * $scope.machineBorder);

  console.log($scope.machineBorder);
 
  $scope.middleLineWidth = Number($('#middleLine').css("width").replace(/px/, ""));
  $scope.middleLineTop = Number($('#middleLine').css("top").replace(/px/, ""));
  $scope.middleLineLeft = Number($('#middleLine').css("left").replace(/px/, ""));

  $scope.thicknessHorizontalLine = Number($('.horizontal').css('border-bottom').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));

  $scope.palletHeight = 10;
  $scope.palletWidth = 30;

  $scope.startPositionMiddleLine = {
    top: $scope.middleLineTop - $scope.palletHeight,
    left: $scope.middleLineLeft
  };

  $scope.machines = [];
  $('.machine').each(function(index) {
    var id = $(this).attr("id");
    var top = Number($(this).css("top").replace(/px/, ""));
    var left = Number($(this).css("left").replace(/px/, ""));
    $scope.machines.push({
      id: id,
      top: top,
      left: left
    });
  });

  //calculate paths from start to each machine
  var pathsFromStartToMachines = [];
  for (var i = 0; i < $scope.machines.length; i++) {
    var id = $scope.machines[i].id;
    var top = undefined;
    if ($("#" + id).hasClass('first-machine-line')) {
      top = $scope.machines[i].top + $scope.machineTotalHeight;
    } else {
      top = $scope.machines[i].top - $scope.palletHeight;
    }
    var left = $scope.machines[i].left + $scope.machineTotalWidth / 2;


    var waypoints = [];
    waypoints.push($scope.startPositionMiddleLine); //starting point middleLine
    waypoints.push({
      top: $scope.middleLineTop - $scope.palletHeight,
      left: left - $scope.palletWidth / 2
    }); //waypoint on middleLine
    waypoints.push({
      top: top,
      left: left - $scope.palletWidth / 2
    });

    var path = {
      id: id,
      waypoints: waypoints
    };
    pathsFromStartToMachines.push(path)
  }

  $scope.pallets = [];

  $scope.createNewPallet = function(type, position) {
    //generate random unique id
    var id = "pallet" + generateId();
    //check if id is not already in use
    while ($scope.pallets.indexOf(id) !== -1) {
      id = "pallet" + generateId();
    }
    //add pallet to DOM
    $('#mainContainer').append('<div class="pallet" id="' + id + '" style="display:none; top:' + position.top + 'px; left:' + position.left + 'px;"></div>');
    $scope.pallets.push(id);

    //pallet fade in
    $('#' + id).fadeIn("50000");
    return id;
  };

  $scope.movePallet = function(palletId, destinationId) {
    //query path to machine. Notice that $.grep returns an array
    var path = $.grep(pathsFromStartToMachines, function(obj) {
      return obj.id === destinationId;
    });
    for (var i = 0; i < path[0].waypoints.length; i++) {
      var waypoint = path[0].waypoints[i];
      $('#' + palletId).animate({
        left: waypoint.left + 'px',
        top: waypoint.top + 'px'
      }, "slow"); //instead of slow you can use e.g. {duration: 2000}
    }
    $('#' + palletId).fadeOut("slow", function() {
      $('#' + palletId).remove();
    });
  };

  $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m1");
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m5");
  }, 1500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m2");
  }, 3000);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m4");
  }, 4500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m3");
  }, 6000);


  function generateId() {
    //generates a random number between 1 and 10000
    return Math.floor((Math.random() * 10000) + 1);
  }
});

#mainContainer > div {
  position: absolute;
}
#mainContainer {
  position: relative;
  width: 700px;
  height: 400px;
  border: 3px solid slategrey;
  background-color: whitesmoke;
}
div.machine {
  width: 60px;
  height: 60px;
  border: 3px solid darkslategray;
  border-radius: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  background-color: lightslategray;
  color: whitesmoke;
  font-family: Verdana, Helvetica, sans-serif;
}
.first-machine-line {
  top: 10%;
}
.second-machine-line {
  top: 50%;
}
#m1 {
  left: 30%;
}
#m2 {
  left: 50%;
}
#m3 {
  left: 70%;
}
#m4 {
  left: 30%;
}
#m5 {
  left: 50%;
}
.line {
  border: 0;
  background: lightgrey;
}
.horizontal {
  border-bottom: 2px dashed dimgrey;
}
.vertical {
  border-left: 2px dashed dimgrey;
}
#middleLine {
  width: 70%;
  top: calc((50% - 10% - 66px) / 2 + 10% + 66px);
  left: 20%;
}
.vertical-line {
  height: calc((50% - 10% - 66px) / 2);
}
.vertical-line-first-machine-line {
  top: calc(10% + 66px);
}
.vertical-line-second-machine-line {
  top: calc(10% + 66px + (50% - 10% - 66px) / 2);
}
#M1toMiddle {
  left: calc(30% + 66px / 2);
}
#M2toMiddle {
  left: calc(50% + 66px / 2);
}
#M3toMiddle {
  left: calc(70% + 66px / 2);
}
#M4toMiddle {
  left: calc(30% + 66px / 2);
}
#M5toMiddle {
  left: calc(50% + 66px / 2);
}
.pallet {
  width: 30px;
  height: 10px;
  background-color: dimgrey;
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div id="mainContainer" class="relative">

    <div class="machine first-machine-line" id="m1">M1</div>
    <div class="machine first-machine-line" id="m2">M2</div>
    <div class="machine first-machine-line" id="m3">M3</div>

    <div class="machine second-machine-line" id="m4">M4</div>
    <div class="machine second-machine-line" id="m5">M5</div>

    <div class="line horizontal" id="middleLine"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M1toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M2toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M3toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M4toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M5toMiddle"></div>

  </div>
</body>

<小时/> 在Safari中进行测试时，线条未正确定位，托盘的起始位置位于窗口顶部。通过用CSS中的简单值替换calc(...)表达式，我获得了预期的布局和行为。结果可以在this jsfiddle中看到。例如，此样式类：

#middleLine {
  width: 70%;
  top: calc((50% - 10% - 66px) / 2 + 10% + 66px);
  left: 20%;
}

替换为：

#middleLine {
  width: 70%;
  top: 38.5%;
  left: 20%;
}

如果需要更精细的计算，另一种方法是计算代码中的值并使用css jQuery方法设置位置样式属性。

jQuery根据浏览器返回不同的顶部和左侧值

3 个答案: