Question

每个动画完成后，我将div移动到子列表的末尾。只有在第一个complete函数运行后，才会在下一个动画运行之前出现延迟。在所有其他之后，没有延迟。

为什么第一个有延迟？

HTML

<div class="outer">
<div class="test">
test
</div>
<div class="test">
test
</div>
<div class="test">
test
</div>
<div class="test">
test
</div>
</div>

的Javascript

jQuery( document ).ready(
function()
{
window.doms = document.querySelectorAll(".test");
window.self = document.querySelector( ".outer");
window.currentTile = doms[ 0 ];
window.currentMove = 0;
window.numberToMove = 20;
window.tileHeight = 20;
window.currentIndex = 0;
console.log( self );
moveNext();
});

function finishMove()
    {
        //Move the top tile to the end
        self.appendChild( currentTile );

        //Adjust its top
        currentTile.style.marginTop = "0px";

        //The next tile
        var next = doms[ currentIndex ];

        //Update current move and tile
        currentMove++;
        currentTile = next;

        //Change the current index
        currentIndex = ( currentIndex === doms.length - 1 ) ? 0 : currentIndex += 1;

        //Move again
        if ( currentMove < numberToMove ) moveNext();

        //We're done
        else alert( "done" );
    }

    function moveNext()
    {
        //Animate the sliding
        jQuery( currentTile ).animate(
            {
                marginTop: "-" + tileHeight + "px"
            },
            {
                duration: 200,
                queue: false,
                complete: finishMove
            }
        );
    };

Answer 1

它似乎是jQuery包装器的构建。如果我将它们缓存在一个数组中，然后使用该数组的jquery对象，那么就没有延迟。

https://stripe.com/docs/checkout#required

//Save them as jQuery objects
window.jDoms = [];
for ( var i = 0; i < doms.length; i++ ) jDoms.push( jQuery( doms[ i ] ) );

...

//Call animate on the pre-build jQuery object
jDoms[ currentIndex ].animate(...)

为什么这个动画只在第一步之后有延迟？

1 个答案: