在动画时获取元素的边距顶部答案

【问题标题】：Getting margin-top of element whilst being animated在动画时获取元素的边距顶部
【发布时间】：2015-06-15 15:09:41
【问题描述】：

我正在为具有上边距的元素设置动画。但是，当所述元素达到一定的余量时，我想创建另一个事件。我做了我认为可行的事情，但它似乎没有做任何事情。

所以我有一个元素移动到上边距 300 像素，当它达到 300 像素时，我希望它到达上边距 -80 像素。

function raindrop(element,speed) {
    $(element).animate({
        'margin-top':'300px'
    }, speed, 'linear');
    margin = parseInt($(element).css('marginTop'));
    if(margin>=300) {
        $(element).css('marginTop','-80px');
            $(element).animate({
        'margin-top':'300px'
    }, speed, 'linear');
    }
}

我还想在这里使用递归函数，以便它继续这样做。任何想法我做错了什么？

【问题讨论】：

在jQuery的animate()中使用"complete" callback function，这是一个动画完成后调用的函数。
@VivianKennedy，我想建议您研究一下requestAnimationFrame API，以便以 linear 方式为元素设置动画。我谦虚地相信，没有必要使用 jQuery 的 animate() 函数来做你想做的事情。但我也知道这是一个非常主观的事情，一个品味的事情。了解可用的选项总是好的。

标签： jquery animation jquery-animate

【解决方案1】：

您不需要在代码中使用任何 if 语句来检查条件，因为 if 语句在动画完成之前执行。而不是 if，最好使用回调函数，它只会在第一个动画完成后执行。在回调中，您可以将元素移回 margin-top:-80px 一旦达到 300px。如果你还想做递归，那么你可以调用你的 raindrop() 函数作为第二个动画的回调函数，它会无限循环。这是修改后的代码：

jQuery：

$(document).ready(function () {
    $("#btn").click(function () {
        raindrop("#mydiv", 1000);
    });
});

function raindrop(element, speed) {
    $(element).animate({
        'margin-top': '300px'
    }, speed, 'linear', function () {
        margin = parseInt($(element).css('marginTop'));
        //alert(margin);
        $(element).animate({
            'margin-top': '-80px'
        }, speed, 'linear', raindrop(element, speed));
    });
}

CSS：

#mydiv
{
    border:1px solid red;
    width:300px;
    height:150px;
}

HTML：

<input type="button" id="btn" value="Press">
<div id="mydiv"></div>

【讨论】：