左にフロートされたブロックとして表示される順序付けられていないリストがあり、jQuery を使用して、クラスに応じてさまざまなブロックを除外します。これにより、ボックスがリストから出てきて残りのボックスが集まり、リストが変更されると、他のボックスが消えて他のボックスが表示されるという効果があります。移動は瞬時に行われ、新しい場所に移動してもらいたいのですが、各ボックスの新しい場所を移動できるようにするにはどうすればよいですか? それらの場所には設定値がないため、その場で解決する必要があります。
デモやコードを確認する必要がある場合は、次のスクリプトに基づいています: http://web.enavu.com/tutorials/client-side-filtering-data-with-jquery/ css jQuery に若干の変更を加えたものです。
私のコード:
$(document).ready(function(){
$('#filters a').click(function(e){
e.preventDefault();
var filter = $(this).attr('id');
$('#content ul li:not(.' + filter + ')').fadeOut('slow').removeClass('visible');
$('#content ul li.' + filter + '').fadeIn('slow').addClass('visible');
});
$('#content ul li').hover(function(){
$(this).addClass('li_hover');
},function(){
$(this).removeClass('li_hover');
});
});
http://jsfiddle.net/brewtime/uDtR6/の JS Fiddle で表示できます。
ご意見ありがとうございます。