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'这样的类选择器。将类添加到如下图像：

JQuery动画批量图像

1 个答案: