JQuery動畫批處理圖像

Question

嗨我一直在我的網頁上嘗試一個相當簡單的動畫，但不知何故無法達到預期的效果。

這是我的頁面http://sisphoto.eu/actions.php。我試圖做的是讓每幅圖像出現在其最終的位置，並使它們一次成爲一個動畫，而不是一次全部成爲動畫。

這裏是我的代碼：

HTML

<div class="left"> 
      <span class="name"> 
       <a href="index.php"><img class="menu" src="name.png"/></a> 
      </span> 
      <span class="img"> 
       <img src="actions/p30.jpg" onclick="Click(this)"/> 
      </span> 
     </div> 

     <div class="middle"> 
      <span class="img"> 
       <img src="actions/p1.jpg" onclick="Click(this)"/> 
      </span> 
      <span class="img"> 
       <img src="actions/p4.jpg" onclick="Click(this)"/> 
      </span> 
     </div> 

     <div class="right"> 
      <span class="img"> 
       <img src="actions/p5.jpg" onclick="Click(this)"/> 
      </span> 
      <span class="img"> 
       <img src="actions/p6.jpg" onclick="Click(this)"/> 
      </span> 
     </div> 

CSS

.left, .middle, .right{ 
    /*max-width: 35%;*/ 
    min-width: 30%; 
    position: relative; 
    float: left; 
    top: 2.5em; 
    margin-right: 2px; 
    margin-bottom: 35px; 
} 

.left{ 
    left: 0; 
} 

.middle{ 
    left: 300; 
} 

.right{ 
    left: 600; 
} 

.img { 
    position: relative; 
    opacity: 0; 
    margin: auto; 
    max-width: 0; 
    -webkit-transition: all 1.5s ease-out; 
    -moz-transition: all 1.5s ease-out; 
    -ms-transition: all 1.5s ease-out; 
    -o-transition: all 1.5s ease-out; 
    transition: all 1.5s ease-out; 
    margin-top: -0.5em; 
} 

JS

jQuery.fn.reverse = [].reverse; 

$(function() { 
    var delay = 300; 
    $('.right, .middle, .left').each(function() { 
     var imgs = $('.img'), 
      iLen = imgs.length; 

     imgs.each(function() { 
      var c = $(this), 
       h = c.height(); 

      delay += 10; 
      setTimeout(function() { 
       c.css('max-width', '100%'); 
       c.css('opacity', '1'); 
      }, delay); 

     }); 
    }); 
}); 

任何幫助嗎？

Answer 1

您可以遍歷所有圖像並延遲動畫處理圖像。延遲是當前圖像的 animationspeed * count

。

var animationspeed = 300; 
 
var count = 0; 
 

 
$('.animate_image').shuffle().each(function() { 
 
    $(this).delay(animationspeed * count).animate({ }, animationspeed); 
 
    count+=1; 
 
}); 
 

 
(function($){ 
 
    
 
$.fn.shuffle = function() { 
 
    
 
    var allElems = this.get(), 
 
     getRandom = function(max) { 
 
      return Math.floor(Math.random() * max); 
 
     }, 
 
     shuffled = $.map(allElems, function(){ 
 
      var random = getRandom(allElems.length), 
 
       randEl = $(allElems[random]).clone(true)[0]; 
 
      allElems.splice(random, 1); 
 
      return randEl; 
 
     }); 
 
    
 
    this.each(function(i){ 
 
     $(this).replaceWith($(shuffled[i])); 
 
    }); 
 
    
 
    return $(shuffled); 
 
    
 
}; 
 
    
 
})(jQuery);

.animate_image { 
 
    opacity: 0.0; 
 
}

編輯： 'IMG' 選擇器的使用，而不是一個類選擇像 '.animate_image'。添加一個類到這樣的圖像：