使用 '+=px' 的 Jquery 动画对象在某个像素处停止

Question

我想从左到右为对象设置动画，我正在使用 animate jquery，我正在使用它从左到右设置动画，但不是直线，我想在锯齿形图案，这是我的代码:

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

它会移动但我不会停止，我想要的是在它到达左侧 1060 像素时停止它。请帮助。或者我可以使用另一种方法

谢谢

Answer 1

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

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>