javascript - 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

您可以循环遍历所有图像并为图像设置延迟动画。延迟是 动画速度 * 计数

当前图像。

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

编辑:使用像“.animate_image”这样的类选择器代替“img”选择器。像这样向图像添加类: