jquery - 使用'+ = px'的jQuery动画对象停在某个px

我想从左到右对对象进行动画处理，我正在使用animate jquery，我正在使用它从左到右进行动画处理，但不是一条直线，我想在锯齿形模式下拍摄它，这是我的代码：

function bird1(){
        $(".bird1").delay(3).animate({left:'+=100',bottom:'+=20'},2222,"linear");
        $(".bird1").animate({left:'+=100',bottom:'-=20'},2222,"linear",bird1);
    }
    bird1();

它会移动，但我不会停下来，我要是停下那只1060px的鸟。请帮助。或者我可以使用另一种方法

谢谢

最佳答案

另一种解决方案是在left函数的开头简单地检查bird1值。检查演示：

function bird1() {

    if (parseInt($('.bird1').css('left')) > 300) {
        return;
    }

    $(".bird1").delay(3).animate({left: '+=100', bottom: '+=20' }, 2222, "linear");
    $(".bird1").animate({left: '+=100',bottom: '-=20'}, 2222, "linear", bird1);
}

bird1();

.bird1 {
    position: absolute;
    bottom: 0;
    left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bird1">
    <img src="https://cdn1.iconfinder.com/data/icons/social-media-set/24/Twitter-32.png" alt="">
</div>