Reihe von Blöcken - klicken Sie auf eine und der Rest Folie aus dem Bildschirm

Question

Ich habe eine Reihe von Blöcken. Wenn einer geklickt wird, möchte ich, dass der Rest vom Bildschirm gleitet und die angeklickte Box an der ersten Position hat.

zum Beispiel

Ich habe versucht, zu Chaos mit jQueryUI Rutsche, aber es schien nicht zu helfen. Hier ist eine JS Fiddle zeigt die ursprünglichen Blöcke. Vielleicht muss ich sie anders positionieren als schweben? Ich überlegte, ob ich versuchen sollte, die Entfernung nach links und vom Bildschirm zu verschieben, aber die Animation sah schrecklich aus.

$('.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); 
    }) 
    }); 
}) 

Sie müssen noch jQueryUI schließen, unten jQuery, um den Dia-Effekt zu erzielen.