浮动元素在隐藏另一个浮动元素时会跳跃

Floated elements jump when hiding another floated elements

本文关键字：元素 跳跃 隐藏 另一个      更新时间：2023-09-26

我有一个浮动元素的网格，我为它创建了一个过滤器。我希望这个过滤器隐藏和显示项目，在这样做的同时，我希望项目随着过渡和淡入淡出而重新调整。。此刻，这些物品只是四处乱跳。

正如你在这里看到的：

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

正如我在评论中提到的，您需要一个与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>

您可以为淡入设置一个延迟，以确保淡入已完成。

下面的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>

是fadeOut和fadeIn的重叠使它们看起来像是在跳跃。

尝试快速滑动地隐藏筛选出的项目关闭适用的框：

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

})；

相关文章：