jquery animate设置所有元素的最后一个值

Question

我正在尝试创建一个看起来像一堆图像的动画，用户可以根据自己的意愿上下滚动。我的问题是，向上滚动我的函数 animationUp 是在调试时将最后一个比例值设置为所有元素我看到它以某种方式被调用两次。请帮忙！

HTML

<div class="content">
    <ul>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
        <li class="image-container">
            <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" />
        </li>
    </ul>
</div>

CSS

.content ul li.image-container {
     width: auto;
     height: auto;
     transform-origin: center top;
     text-align: center;
     margin-left: 50px;
 }
.content ul li.image-container img {
     max-width: 100%;
     max-height: 100%;
     margin: 0 auto;
     box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
     transition: all 600ms ease-in-out;
 }
 ul li.image-container:last-child img {
     transform: scale(1.2);
     margin-top: 700px;
 }
ul li.image-container:nth-last-child(2) img {
     transform: scale(1.1);
     margin-top: 200px;
 }
.content ul li.image-container:nth-last-child(3) img {
     transform: scale(1);
     margin-top: 100px;
 }
.content ul li.image-container:nth-last-child(4) img {
     transform: scale(0.9);
     margin-top: 50px;
 }
.content ul li.image-container:nth-last-child(5) img {
     transform: scale(0.8);
     margin-top: 1px;
 }
.content ul li.image-container:nth-last-child(6) img {
     transform: scale(0.7);
     margin-top: -40px;
 }
.content ul li.image-container:nth-last-child(7) img {
     transform: scale(0.6);
     margin-top: -80px;
 }
.content ul li.image-container:nth-last-child(8) img {
     transform: scale(0.55);
     margin-top: -100px;
 }
.content ul li.image-container:nth-last-child(9) img {
     transform: scale(0.5);
     margin-top: -120px;
 }
.content ul li.image-container:nth-last-child(10) img {
     transform: scale(0.45);
     margin-top: -140px;
 }
.content ul li.image-container:nth-last-child(n+10) img {
     transform: scale(0.4);
     margin-top: -155px;
 }

JS：

var animationDown = function () {
    var arrImages = $('li.image-container').filter(':visible');
    var length = arrImages.length;
    $.each(arrImages, function (i, v) {
        if (i !== length - 1) {
            var nextScale = $(arrImages).eq(i + 1).find('img').css('transform');
            nextScale = decodeMatrix(nextScale, 'scale');
            var nextMargin = $(arrImages).eq(i + 1).find('img').css('margin-top');
            $(arrImages).eq(i).find('img').animate({
                'margin-top': nextMargin
            }, {
                step: function (now, fx) {
                    $(this).css('transform', 'scale(' + nextScale + ')');
                },
                duration: 'fast'
            }, 'linear');
        } else {
            $(arrImages).eq(i).hide();
        }
    });
};
var animationUp = function () {
    var scaleArr = ['0.40', '0.45', '0.50', '0.55', '0.60', '0.70', '0.80', '0.90', '1.00', '1.10', '1.20'];
    var marginArr = ['-155px', '-140px', '-120px', '-100px', '-80px', '-40px', '1px', '50px', '100px', '200px', '700px'];
    var visible = $('li.image-container').filter(':visible');
    var visibleLength = visible.length;
    var total = $('li.image-container');
    var totalLength = total.length;
    var i, currentMargin, currentScale, currentIndexS, currentIndexM, prevScale, prevMargin;
    var lastVisible = $('li.image-container').eq(0);
    for (i = visibleLength - 1; i >= 0; i--) {
        currentMargin = $(total).eq(i).find('img').css('margin-top');
        currentScale = $(total).eq(i).find('img').css('transform');
        currentScale = parseFloat(decodeMatrix(currentScale, 'scale')).toFixed(2);
        currentIndexS = $.inArray(currentScale, scaleArr);
        currentIndexM = $.inArray(currentMargin, marginArr);
        prevScale = parseFloat(scaleArr[currentIndexS - 1]).toFixed(2);
        prevMargin = marginArr[currentIndexM - 1];
        console.log('li:' + i + 'currentMargin and currentScale:' + currentScale + ' ' + currentMargin + 'going to get applied property:' + prevScale + ' ' + prevMargin);
        $(total).eq(i).find('img').animate({
            'margin-top': prevMargin
        }, {
            step: function (now, fx) {
                $(this).css('transform', 'scale(' + prevScale + ')');
            },
            duration: 'fast',
            complete: function () {
            }
        }, 'linear');
    }
};

function decodeMatrix(matrix, query) {
    var values = matrix.split('(')[1];
    values = values.split(')')[0];
    values = values.split(',');
    var output = {
        a: values[0],
        b: values[1],
        c: values[2],
        d: values[3],
        x: values[4],
        y: values[5]
    };
    output.a = parseFloat(output.a);
    output.b = parseFloat(output.b);
    output.scale = parseFloat(output.a).toFixed(2);
    output.sin = output.b / output.scale;
    output.angle = Math.round(Math.asin(output.sin) * (180 / Math.PI));
    if (query) {
        return output[query];
    }
    return output;
}

$('.content').on('DOMMouseScroll mousewheel', function (event) {
    if (event.originalEvent.wheelDeltaY < 0 || event.originalEvent.detail > 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
        console.log('down');
        animationDown();
    } else {
        console.log('up');
        animationUp();
    }
    //prevent page fom scrolling
    return false;
});

这是JS小提琴link