在 jQuery 中分割和动画化多张图像

Question

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

我的问题是它不适用于第二个 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>

CSS

.fragments {
    position: relative;
    width: 142px; 
    height: 142px;
    margin:10px;    
}

.fragments img {
    width:100%;
    height:100%;
}

.fragment { 
    float: left;
    opacity: 1;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.fragment-animated {
    opacity: 0;
}

.css3-preload .fragments * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

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');
});

谢谢！

Answer 1

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

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

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

  event.preventDefault();
});

见this jsfiddle。

显然，这是因为 jQuery returns jQuery.isFunction( elem[ type ] ) 的不同结果。在 Chrome elem[type] 中包含一个（基本上是空的）函数，因此 jQuery returns true 并执行默认操作，然后导致错误。

在 Firefox 中，语句 returns 为假，因为 elem[type] 未定义。因此，jQuery 从不尝试执行默认事件，即使它没有被特别阻止。所以永远不会达到抛出错误的代码。

在 jQuery 中分割和动画化多张图像

Split and animate multiple images in jQuery

css

jquery

jquery-animate