ブロックの行 - 1つをクリックすると、残りの部分が画面外にスライドします。

Question

ブロックの行があります。 1つをクリックすると、残りの部分が画面外にスライドし、最初の位置にクリックされたボックスが表示されます。例えば

私はjQueryUIスライドを台無しにしようとしたが、助けていないようでした。元のブロックを示すJS Fiddleがあります。たぶん私は浮動とは違って配置する必要がありますか？私は距離をスクリーンの左と右に動かすことを考えましたが、アニメーションはひどく見えました。

$('.block').on('click', function() { 
    $('.block').not($(this)).hide("slide", { direction: "left" }, 500, function() { 
}); 

Answer 1

$(document).ready(function(e) { 
    $('.block').each(function(item) { 
    $(this).click(function() { 
     $('.block').not($(this)).hide('slide', {direction: 'left'}, 500); 
    }) 
    }); 
}) 

あなたはまだスライド効果を達成するためには、jQueryのを怒鳴る、jQueryUiを含める必要があります。