Question

我想＆＃34;反弹＆＃34;如果它在视口中，则为div一次。

我有这样的事情：

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

<script type="text/javascript" charset="utf-8">

$(function() {
   $(window).bind("scroll", function(event) {

    $(".DIV:in-viewport").each(function() {

      $( ".DIV" ).effect( "bounce", {times: 1, distance: 12}, 200);

    });
   });
);

一切都很好，div在视口中弹跳但是在弹跳一次后我该怎么做才能退出该功能。在片刻中，当它在视口中时它会一直弹跳。

谢谢！

Answer 1

如果您只想让它反弹一次，最简单的方法就是删除＆＃34;滚动＆＃34;钩。

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

$(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从屏幕上滚动并再次返回视口，则不会设置此动画。一旦它反弹，它就会永远完成（直到你刷新页面）

Answer 2

同意上面有关解除绑定的内容，但您也可以使用one事件处理程序，该处理程序仅触发一次然后自动解除绑定：

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

jQuery：如果div在viewport中做了一次

2 个答案: