我有什么办法可以从下面给出的动画功能中获得 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

。或通过offsettop：

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的值。如果你有几个同时要制作动画，你需要一个each循环：

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