jquery - 在动画时获取元素的边距顶部

Question

我正在使用上边距对元素进行动画处理。但是，当所述元素达到一定限度时，我想创建另一个事件。我做了我认为会起作用的事情，但它似乎没有做任何事情。

所以我有一个元素移动到 margin-top 300px，当它达到 300px 时，我希望它到达 margin-top -80px。

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');
    }
}

我还想在这里使用递归函数，以便它继续执行。有什么想法我做错了吗？

Answer 1

您不需要在代码中使用任何 if 语句来检查条件，因为 if 语句在动画完成之前执行。最好使用回调函数，而不是 if，该函数仅在第一个动画完成后执行。在回调中，一旦元素达到 300px，您就可以将其移回到 margin-top:-80px。如果您还想进行递归，那么您可以调用 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>