2011-12-15 8 views
0

jQueryでブロックトランジションを作成する最適な方法は何ですか?この移行を提供するプラグインはありますか(移行のみ、私はイメージギャラリーを望んでいませんが、そのような移行があります)。jQueryでブロックトランジションを作成する方法

私は最初のリンクでhttp://codecanyon.net/item/jquery-banner-rotator-slideshow/full_screen_preview/109046

問題でhttp://mitya.co.uk/scripts/Blockster-transition-effect-122または斜め拡大ブロック遷移のようなものを探していますが、もう少しブロックを使用しているとき、それは、非常に遅いこと、です。 2番目のリンクでどのように遷移が作成されたのか分かりません。

答えて

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);  
} 
関連する問題