如何在 jQuery 中创建块过渡答案

【问题标题】：How to create a block transition in jQuery如何在 jQuery 中创建块过渡
【发布时间】：2011-12-15 13:38:13
【问题描述】：

在 jQuery 中创建块转换的最佳方法是什么？有没有提供这种转场的插件（只有转场，我不想要有这种转场的图库！）？

我正在寻找类似http://mitya.co.uk/scripts/Blockster-transition-effect-122 或http://codecanyon.net/item/jquery-banner-rotator-slideshow/full_screen_preview/109046 的对角展开块过渡

第一个链接的问题是，当使用更多块时，它非常慢。我无法弄清楚第二个链接上的过渡是如何创建的。

【问题讨论】：

标签： javascript jquery transition effect

【解决方案1】：

如果您将此代码添加到第 144 行的 blockster.js，您将有更多的块同时消失。

/* ------------------
| ANIMATION - with all blocks built, set an interval to turn them all on, one by one.
| When all blocks in position, and all have finished anim (if fade rather than simple)
|   - kill int
|   - shuffle slides so the one our blocks contain parts of is genuinely topmost
|   - remove blocks
------------------ */
    var simultaneous = 5;
for(var i = 0; i < simultaneous; ++i)
{
    addTimer(nextSlide, thiss, i, simultaneous);
}
}

function addTimer(nextSlide, thiss, i, simultaneousBlocks)
{
    setTimeout(function()
    {
    var animInt = setInterval(function() 
        {
        if(thiss.params.holder.children('.block:not(:visible)').length > 0)     
            {
            var blocks = thiss.params.holder.children('.block:not(:visible)');
        with($(blocks.get(!thiss.params.random ? 0 : Math.floor(Math.random() * blocks.length)))) thiss.params.animType == 'simple' ? show() : fadeIn(thiss.params.blockAnimSpeed);
    }
    else if ($('.block:animated').length == 0) 
            {
        clearInterval(animInt);
        nextSlide.siblings().hide();
        nextSlide.show();
        $('.block').remove();
        }
    }, thiss.params.blockAnimSpeed);
}, (thiss.params.blockAnimSpeed / simultaneousBlocks) * i);     
}

【讨论】：