html - 当 div 穿过特定位置时触发动画

Question

上图说明了我的情况。当用户单击按钮时，我正在div使用 JqueryAnimate()函数将位置“A”[100,100] 移动到位置“C”[100,500]，在重新定位期间，div应该必须穿过位置“B”[100,250]。那时，当它穿过位置 B 时，我需要触发另一个动画。

与这个问题相关，我浏览了很多并找到了这个链接。但它没有一个公认的答案。此外，Jquery 有一个名为 的事件Change，但不幸的是它只兼容form elements. 我的问题是，如果真的不存在，我们可以手动处理类似postionChanged或在 jquery 中的事件吗？offsetChanged或者有什么可行的方法可以满足我的需要。？

谢谢..！

Answer 1

您需要通过每一步测试动画并运行一个函数来测试位置。这来自 API 文档，可以轻松地重新用于您的动画。

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});

我为它做了一个小提琴。http://jsfiddle.net/MatthewDavis/6g8aP/1/

Answer 2

jQuery.animate采用支持以下方法的选项参数（来源）[http://api.jquery.com/animate/]

step 类型：Function(Number now, PlainObject fx) 动画每一步后调用的函数。

在您的情况下，代码如下所示：

$('div').animate({
  left: 500
}, {
  step: function(now, fx){
    if (parseInt(now, 10) === 250){
      // call your animation method here.
    }
  }
})

Answer 3

这是一个可行的解决方案：我还使用了 step-event

HTML

<div id="#wrapper">
  <div class="left"></div>
  <div class="right"></div>
  <div class="dot"></div>
</div>
<button class="go">GO!</button>

CSS

#wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.left, .right {
  position: absolute;
  top: 25px;

  width: 100px;
  height: 100px;
}
.left {
  z-index: 1;
  left: 25px;
  background-color: red;
}
.right {
  right: 25px;
  background-color: green;
}

.dot {
  position: absolute;
  top: 72.5px;

  width: 5px;
  height: 5px;
  left: 50%;
  margin-left: 2.5px;

  background-color: blue;
}

button.go {
  display: block;
  position: absolute;
  top: 150px;
  left: 25px;
}

jQuery

var $left = jQuery('.left');
var $right = jQuery('.right');
var $button = jQuery('button.go');
var $dot = jQuery('.dot');

var rightPos = $right.offset().left;
var dotPos = $dot.offset().left;
var thread = undefined;
var animationStarted = false;

$button.click(function() {
  $left.animate({
    'left': rightPos
  }, {
    duration: 1000,
    specialEasing: {
      'left': 'easeOutQuad'
    },
    step: function(now, fx) {
      if (!animationStarted && now +$left.width() > dotPos) {
        if (thread) { clearTimeout(thread); }
        thread = setTimeout(function() {
          animation();
          animationStarted = true;
        }, 0);
      }
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

function animation() {
  $right.animate({
    'background-color': '#0000ff'
  }, {
    specialEasing: {
      'background-color': 'easeOutQuad'
    }
  });
};

请注意，我在 step-function 中使用 setTimeout 在另一个上下文中调用第二个动画。我不确定在一个正在运行的动画中运行.animate()调用是否很好。我认为，为了保持顺利，最好这样做。有没有人确切地知道它？

另一点是变量animationStarted。它只记得我们是否调用了第二个动画。这是确保不在其他动画的步骤事件中调用复杂动画的另一件事。通过这种方式，我们肯定只调用一次。

演示