Question

我有一个基于CSS3的动画，其中包含＆＃34;无限＆＃34;在动画上设置的属性。您可以在http://codepen.io/mprewitt/pen/Ezyuq

看到演示

我想要做的是当元素浮动到页面顶部时更改元素的X位置，这样当它们在页面底部恢复时，它们处于一个新的随机位置。我想我可以用jQuery＆＃34; animationend＆＃34;回电，但它似乎不起作用。要么我的代码错了，要么将CSS动画设置为＆＃34;无限＆＃34;意味着它永远不会结束（我想也许循环的结束将被视为＆＃34;结束＆＃34;，但可能不会）。

这是jQuery代码：

$( document ).ready(function() {
  $( ".ani-bubble" ).on( 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){

    // Change the item's 'left' property to a random value from -20% to 120%.
    var bubbleoffset = Math.floor((Math.random() * 140) - 19);
    $(this).css({ 'left': bubbleoffset+'%' });

  });
});

Answer 1

我认为这就是您所需要的：http://codepen.io/anon/pen/gfqEL

$( document ).ready(function() {
  jQuery.expr.filters.offscreen = function(el) {
  return (
      (el.offsetLeft + el.offsetWidth) < 0 
      || (el.offsetTop + el.offsetHeight) < 0
      || (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight)
    );  
    };
  setInterval(function(){
    $('.ani-bubble').each(function(){
      if($(this).is(':offscreen')){
       var bubbleoffset = Math.floor((Math.random() * 140) - 19);
         $(this).css({ 'left': bubbleoffset+'%' }); 
      }
    });
  },50);
});

当对象离开页面时改变CSS3动画循环

1 个答案: