浮動元素跳隱藏當另一個浮動元素

Question

我有浮動的元素，爲此，我創建的過濾器的網格。我想這個過濾器隱藏和顯示的項目，而這樣做我想要的物品重新與過渡和淡入淡出調整..目前的項目只是跳來跳去。

正如你可以在這裏看到：

JSFIDDLE

我怎樣才能使物品滑動到自己的位置？

繼承人的代碼：

HTML

<ul class="filters"> 
    <li data="1">filter 1</li> 
    <li data="2">filter 2</li> 
    <li data="3">filter 3</li> 
    <li data="4">filter 4</li> 
</ul> 
<br> 
<ul class="items"> 
    <li data="1">1</li> 
    <li data="2">2</li> 
    <li data="1">3</li> 
    <li data="3">4</li> 
    <li data="4">5</li> 
    <li data="2">6</li> 
    <li data="3">7</li> 
    <li data="4">8</li> 
</ul> 

CSS

ul { 
    list-style: none; 
    padding: 0; 
} 
.filters li { 
    float:left; 
    margin-right: 10px; 
    cursor: pointer; 
} 
.items li { 
    width: 100px; 
    height: 100px; 
    background: #ccc; 
    float: left; 
    margin: 20px; 
} 

JQUERY

$(document).ready(function() { 


    $('.filters li').click(function() { 
     var data; 

     data = $(this).attr('data'); 
     $('.items li').each(function() { 
      if($(this).attr('data') !== data) { 
       $(this).fadeOut(); 
      } 
      else { 
       $(this).fadeIn(); 
      } 
     }); 

    }); 

}); 

Answer 1

正如我在評論中提到的，你會爲涉及顯示屬性和不能動畫或過渡需要比fadeIn/Out不同的操作。

動畫非display值似乎更優化。

事情是這樣的：

$(document).ready(function() { 
 

 

 
    $('.filters li').click(function() { 
 
    var data; 
 

 
    data = $(this).attr('data'); 
 
    $('.items li').each(function() { 
 
     if ($(this).attr('data') !== data) { 
 
     $(this).addClass('hidden'); 
 
     } else { 
 
     $(this).removeClass('hidden'); 
 
     } 
 
    }); 
 

 
    }); 
 

 
});

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
.filters li { 
 
    float: left; 
 
    margin-right: 10px; 
 
    cursor: pointer; 
 
} 
 
.items li { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    float: left; 
 
    margin: 20px; 
 
    transition: all .5s ease; 
 
} 
 
li.hidden { 
 
    height: 0; 
 
    width: 0; 
 
    margin: 0; 
 
    opacity: 0; 
 
    font-size: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="filters"> 
 
    <li data="1">filter 1</li> 
 
    <li data="2">filter 2</li> 
 
    <li data="3">filter 3</li> 
 
    <li data="4">filter 4</li> 
 
</ul> 
 
<br> 
 
<ul class="items"> 
 
    <li data="1">1</li> 
 
    <li data="2">2</li> 
 
    <li data="1">3</li> 
 
    <li data="3">4</li> 
 
    <li data="4">5</li> 
 
    <li data="2">6</li> 
 
    <li data="3">7</li> 
 
    <li data="4">8</li> 
 
</ul>

Answer 2

你可以在設置淡入淡出的延遲，以確保淡出已完成。

的500ms的延遲下面是有一個稍微長持續時間的褪色。

$(document).ready(function() { 
 

 

 
    $('.filters li').click(function() { 
 
    var data; 
 

 
    data = $(this).attr('data'); 
 
    $('.items li').each(function() { 
 
     if ($(this).attr('data') !== data) { 
 
     $(this).fadeOut(); 
 
     } else { 
 
     $(this).delay(525).fadeIn(); 
 
     } 
 
    }); 
 

 
    }); 
 

 
});

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
.filters li { 
 
    float: left; 
 
    margin-right: 10px; 
 
    cursor: pointer; 
 
} 
 
.items li { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    float: left; 
 
    margin: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="filters"> 
 
    <li data="1">filter 1</li> 
 
    <li data="2">filter 2</li> 
 
    <li data="3">filter 3</li> 
 
    <li data="4">filter 4</li> 
 
</ul> 
 
<br> 
 
<ul class="items"> 
 
    <li data="1">1</li> 
 
    <li data="2">2</li> 
 
    <li data="1">3</li> 
 
    <li data="3">4</li> 
 
    <li data="4">5</li> 
 
    <li data="2">6</li> 
 
    <li data="3">7</li> 
 
    <li data="4">8</li> 
 
</ul>

Answer 3

它的淡出和淡入，使得它看起來像他們跳的重疊。

嘗試躲在被過濾掉的項目快速了slideDown適用的盒子：

$(document).ready(function() { 


$('.filters li').click(function() { 
    var data; 

    data = $(this).attr('data'); 
    $('.items li').each(function() { 
     if($(this).attr('data') !== data) { 
      $(this).slideUp(); 
     } 
     else { 
      $(this).delay(525).slideDown(); 
     } 
    }); 

}); 

}）;