jQuery：如果div在viewport中，请执行一次操作

如果div在视口中，我想将其“反弹”一次

我有这样的想法：

<script language="javascript" type="text/javascript"    
src="js/jquery.viewport.js">

$（函数（）{
$（窗口）.bind（“滚动”），函数（事件）{
$（“.DIV:在视口中”）.each（函数（）{
$（“.DIV”）.effect（“反弹”，{times:1，distance:12}，200）；
});
});
);

一切正常，div在视口中时正在反弹，但在反弹一次后如何退出该函数。目前，它在视口中时一直在反弹

---

谢谢！

如果您只想让它反弹一次，最简单的方法就是移除“滚动”挂钩

这将在触发一次滚动后停止触发滚动

$(function() {
  var bounce_my_div = function(event) {
    $(".DIV:in-viewport").each(function() {
      $( ".DIV" ).effect( "bounce", {times: 1, distance: 12}, 200);
    });

    $(window).unbind("scroll", bounce_my_div);
  };

  $(window).bind("scroll", bounce_my_div);
);

---

注意：如果您稍后将div从屏幕上滚动并再次返回视口，则此操作将不会产生动画。一旦div反弹，将永远完成（直到您刷新页面）

同意上述关于解除绑定的内容，但您也可以使用只触发一次然后自动解除绑定的

one

事件处理程序：

$(window).one("scroll", bounce_my_div);

---

谢谢！但是，就像你在便笺中写的那样，当div在视口中时，我可以做什么来每次（一次）设置它的动画？当它离开视口时重新钩住事件，这样它就会再次启动。你只需重复使用

$（window）。绑定（“滚动”，bounce\u my\u div）

。棘手的部分是找到一个事件，该事件不再出现在屏幕上时触发。可能使用滚动事件进行此操作，并使用主体的

scrollTop（）

值和元素

.offset（）.top

和

.height（）进行计算

。您可以将此答案与Gary的解决方案混合使用，Gary的解决方案使用

one

而不是

bind

和

unbind

。这样会更干净一些，但当元素离开视口时，您仍然需要重新挂钩。我不知道该函数！太棒了。（为什么不调用一次？奇怪）

$(window).one("scroll", bounce_my_div);