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

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>