Question

我有一个包装div（灰色背景），里面有5个方块。按下一个按钮后，蓝色按钮移动并且必须在包装div的末端停止，但它会在它后面。如何让它到达div的末尾，而不是在它后面？

到目前为止我还有尝试过：

<button id = "start">
Start
</button>

<div style="background-color:rgb(201, 201, 201);width:80%;height:250px" id="horsewrapper">
        <div style="height: 50px; width: 100px; text-align: center; background-color: blue;" id="horse1">1</div>
        <div style="background-color:red;text-align:center;height:50px;width:100px" id="horse2">1</div>
        <div style="background-color:green;text-align:center;height:50px;width:100px" id="horse3">1</div>
        <div style="background-color:yellow;text-align:center;height:50px;width:100px" id="horse4">1</div>
        <div style="background-color:orange;text-align:center;height:50px;width:100px" id="horse5">1</div>
    </div>

演示可以在这里找到： https://jsfiddle.net/wqrun6ny/2/

由于

Answer 1

您可以在开始动画之前进行计算。它采用包装器的宽度并将其减去“马”的宽度：

https://jsfiddle.net/wqrun6ny/4/

$('#start').click(function(){
  var margin = $('#horsewrapper').width() - $('#horse1').width();
  $('#horse1').animate({"margin-left": margin},{"duration":1000,"easing":"linear"});
});

修改

根据评论中的请求，您可以使用stop()方法然后重新初始化动画，它完美运行：

https://jsfiddle.net/wqrun6ny/15/

$('#start').click(function(){
  animate($('#horse1'));
});

$(window).on('resize', function() {
  $('#horse1').stop();
  animate($('#horse1'));
});

var animate = function(element) {
  var margin = $('#horsewrapper').width() - element.width();
  element.animate({"margin-left": margin},{"duration":5000,"easing":"linear"});
};

您会注意到一个问题，如果您没有按下按钮但是您调整了窗口大小，它将启动动画。为避免这种情况，您可以添加标记或检查div是否处于初始位置。

Answer 2

https://jsfiddle.net/wqrun6ny/3/

保证金100％为元素增加了保证金。要避免这种情况，您应该添加到animate函数left属性，该属性等于element的宽度：

$('#horse1').animate({"margin-left":"100%", 'left': -100} ....

但仅当元素具有位置时才会起作用：relative

Answer 3

您必须首先计算保证金，然后根据保证金制作动画。试试这样：

[Route("flights/{path}/{date}/{clock}/{count}")]
public ActionResult flights(string path, string date...

Answer 4

https://jsfiddle.net/wqrun6ny/14/

您可以计算容器的宽度，并减去移动的框的宽度。将其100％推送将导致您的演示显示。

如果它的静态框宽度相同，您也可以使用静态像素值。

var horsewrapperWidth = $('#horsewrapper').width() -100;

100是＆＃34; horse＆＃34;的宽度。

$('#horse1').animate({"margin-left": horsewrapperWidth + 'px'},{"duration":5000,"easing":"linear"});

Answer 5

最简单的方法！

＆＃13;

$('#start').click(function() {
// added this variable to get width of box
  var box = $('#horsewrapper').width();

  $('#horse1').finish().css("margin-left", "initial");
  $('#horse1').animate({
    "margin-left": box - 100 // box - width of horse (100%-100px)
  }, {
    "duration": 5000,
    "easing": "linear"
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="start">
  Start
</button>

<div style="background-color:rgb(201, 201, 201);width:80%;height:250px" id="horsewrapper">
  <div style="height: 50px; width: 100px; text-align: center; background-color: blue;" id="horse1">1</div>
  <div style="background-color:red;text-align:center;height:50px;width:100px" id="horse2">1</div>
  <div style="background-color:green;text-align:center;height:50px;width:100px" id="horse3">1</div>
  <div style="background-color:yellow;text-align:center;height:50px;width:100px" id="horse4">1</div>
  <div style="background-color:orange;text-align:center;height:50px;width:100px" id="horse5">1</div>
</div>

＆＃13;

保证金 - 左边的动画到div的结尾

5 个答案:

修改