jquery - 有什么办法可以从下面给出的动画功能中获取 top 的当前值

Question

$(".box").animate({
    top: '400px',
    height: '45px',
    width: '200px',},7000).fadeOut("slow").hide("slow");

Answer 1

是的，您可以在动画期间随时通过 css 索要它:

var top = $(".box").css("top");   // `top` will be a string, like 18.28px

...或通过 offset的顶部:

var top = $(".box").offset().top; // `top` will be a number

例子:

var box = $(".box");
box.animate({
    top: '400px',
    height: '45px',
    width: '200px',},7000).fadeOut("slow").hide("slow");

var timer = setInterval(function() {
  var top = box.css("top");
  var pos = box.offset();
  console.log('.css("top"): ' + top);
  console.log('.offset().top: ' + pos.top);
  if (Math.round(parseFloat(top)) >= 400) {
    clearInterval(timer);
  }
}, 500);
setTimeout(function() {
  clearInterval(timer);
}, 7010);

.box {
  position: absolute;
}

<div class="box">x</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请注意，在这两种情况下，您都将获得与 .box 匹配的 first 元素的值。如果您同时对其中几个进行动画处理，则需要一个 each 循环:

$(".box").each(function() {
    var topForThisOne = $(this).offset().top;
});