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

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

您需要使用一些方法来检查回调中的左偏移量，当然有 offset() 方法可以做到这一点。

在您的示例中，这应该可以解决问题，将 200 更改为适合您正在做的事情的任何数字。

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

注意：您可以使用 offset.left 或 offset.top 并相应地采取行动 - 这里的偏移量是

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

    $('#fly').on('click', function() {
      bird1();
    });

.bird1 {
  position: absolute;
  padding: 20px;
  border-radius: 50%;
  background: #fafafa;
  left: 0;
  top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bird1">I'm flying</div>
<button id="fly">flap</button>

您可以查看 this fiddle 的工作示例。

Answer 2

$(function() {
    var maxLeft = 1060;
    var zagIncLeft = 100;
    var zagIncTop = 20;
    var zagTopSwitch = '+';
    var bird = $('#bird');
    setInterval(function() {
        if (parseInt(bird.css('left')) < maxLeft) {
            bird.animate({
                left: '+=' + zagIncLeft,
                top: zagTopSwitch + '=' + zagIncTop
            }, 999, "linear");
            if (zagTopSwitch == '+') {
                zagTopSwitch = '-';
            } else {
                zagTopSwitch = '+';
            }
        }
    }, 1000);
});

#bird {
    background: lightblue;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    position: absolute;
    top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bird"></div>

fiddle: http://jsfiddle.net/kwqdosv0/

Answer 3

另一种解决方案是简单地检查 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>

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

Jquery animate object using '+=px' stop at a certain px

html

css

jquery

jquery-animate