在jQuery中拆分多个图像并设置其动画

我想把两张图片分成几部分，然后让它们同时随机消失

以下是链接：

我的问题是它对包含图像的第二个div不起作用

HTML

<button>Animate</button>

<div class="fragments">
  <img src="img/vignettes/illustrations_perso.jpg"/>
</div>

<div class="fragments">
  <img src="img/vignettes/bonhomes.jpg"/>
</div>

JAVSCRIPT

;(function( $, window ) {

  var _defaults = {
    x      : 1, 
    y      : 1, 
    random : true, 
    speed  : 800,
    queue: false
  };

  function range( min, max, rand ) {
    var arr = ( new Array( ++max - min ) )
      .join('.').split('.')
      .map(function( v,i ){ return min + i })
    return rand
      ? arr.map(function( v ) { return [ Math.random(), v ] })
         .sort().map(function( v ) { return v[ 1 ] })
      : arr
  }

  $('body').addClass('css3-preload')
  $( window ).load(function(){ $('body').removeClass('css3-preload') })

  $.fn.fragments = function( options ) {

    var o = $.extend( {}, _defaults, options );

return this.each(function() {

  var $container = $(this);

制作片段：

  var width = $container.width(),
      height = $container.height(),
      $img = $container.find('img'),
      n_fragments = o.x * o.y ,
      fragments = [], $fragments;

  for ( var i = 0; i < n_fragments ; i++ ) {
    fragments.push('<div class="fragment"/>');
  }

  $fragments = $( fragments.join('') );

  // Hide original image and insert fragments in DOM
  $img.hide().after( $fragments );

  // Set background
  $fragments.css({
    width: width / o.x,
    height: height / o.y,
    backgroundImage: 'url('+ $img.attr('src') +')'
  });

  // Adjust position
  $fragments.each(function() {
    var pos = $(this).position();
    $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
  });

  var fragmentsArr = range( 0, n_fragments, o.random ),
      fragmentSpeed = o.speed / n_fragments; // time to clear a single fragment

  // Public method
  $container.on( 'animate', function() {

    fragmentsArr.forEach(function( fragment, i ) {
      setTimeout(function(){
        $fragments.eq( fragment ).toggleClass( 'fragment-animated' );
      }, i * fragmentSpeed );
    });

  });

});

  };


}( jQuery, window ));

$('.fragments').fragments({ x: 3, y: 3});

$('button').click(function() {
    $('.fragments').trigger('animate');
});

---

谢谢

必须阻止动画事件的默认操作，才能使其在所有浏览器中正常工作

// Public method
$container.on( 'animate', function(event) {

  fragmentsArr.forEach(function( fragment, i ) {
    setTimeout(function(){
      $fragments.eq( fragment ).toggleClass( 'fragment-animated' );
    }, i * fragmentSpeed );
  });

  event.preventDefault();
});

看

显然，这是因为jQuery为

jQuery.isFunction（elem[type]）

返回了不同的结果。在Chrome中，elem[type]持有一个（基本上为空）函数，因此jQuery返回true并执行默认操作，然后导致错误

---

在Firefox中，该语句返回false，因为

elem[type]

未定义。因此，jQuery从不尝试执行默认事件，即使没有特别阻止它。所以抛出错误的代码永远不会到达。

对我来说很有效。两幅图像都分解后消失了。不是我…使用chrome“Uncaught TypeError:无法对“Element”执行“animate”：需要1个参数，但只存在0个。太好了！非常感谢Kulturfunker！

// Public method
$container.on( 'animate', function(event) {

  fragmentsArr.forEach(function( fragment, i ) {
    setTimeout(function(){
      $fragments.eq( fragment ).toggleClass( 'fragment-animated' );
    }, i * fragmentSpeed );
  });

  event.preventDefault();
});