Question

为了更好地了解我正在尝试做什么，我有这个小提琴：

https://jsfiddle.net/tfisher9180/7efagjhj/1/

当你点击按钮时，3个方块淡出，然后橙色方块因为没有其他方块而立即卡住。

我想知道是否有办法让它看起来更加流畅，以便橙色框也可以向上滑动。

.square {transition: all 0.3s linear;}

这不像我预期的那样有效。

更新

将@陪伴标记为与我合作并帮助修复定位的正确答案。每个人的解决方案都很棒，而且工作得很好。 +1为所有人，并将不得不尝试一些看看哪个看起来最好!!!

Answer 1

所以，这里使用CSS转换的问题是当它周围的框消失时橙色框的CSS属性没有改变 - 它只是根据变化回到DOM中的新位置这些其他框的显示属性。我想如果你想要这个工作，你将不得不写一个自定义的jQuery代码，淡出框，但不会立即隐藏它们，而是将它们向上滑动而不在视线范围内。

尝试这样的事情：

$('#sort').on('click', function() {
  $('.square').each(function() {
    if (!$(this).hasClass('square-orange')) {
      $(this).animate({'opacity' : 0}, 400, 'swing', function () {
          $(this).slideUp();
      });
    }
  });
});

编辑：关于跳过 - 确实不确定，但我尝试用自定义替换替换slideUp，它似乎解决了它：

$('#sort').on('click', function() {
  $('.square').each(function() {
        if (!$(this).hasClass('square-orange')) {
        $(this).animate({'opacity': 0}, 400, 'swing', function() {
            $(this).animate({'height': 0}, 400, 'swing');
      });
    }
  });
});

编辑（再次）：实际上，现在看，我看到一个问题是顶部.row仍然在滑动后的方框后保持高度....你可能还需要将其向上滑动，取决于您的要求..

编辑：

好的，上次，确定了你的定位 - 我觉得这样有效：

$('#sort').on('click', function() {
  $('.square').each(function() {
		if (!$(this).hasClass('square-orange')) {
    	$(this).animate({'opacity': 0}, 400, 'swing', function() {
      	$(this).animate({'height' : 0}, 400, 'swing');
      });
    }
  });
});

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  display: block;
  clear: both;
}
.square {
  width: 60px;
  height: 60px;
  display: block;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.square-red {
  background-color: red;
}

.square-blue {
  background-color: blue;
}

.square-orange {
  background-color: orange;
}

.square-purple {
  background-color: purple;
}

#sort {
  margin-top: 30px;
  background-color: #414141;
  border: 0;
  color: #f2f2f2;
  padding: 10px 15px;
  cursor: pointer;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row row-top clearfix">
    <div class="square square-red"></div>
    <div class="square square-blue"></div>
  </div>
  <div class="row row-bottom clearfix">
    <div class="square square-orange"></div>
    <div class="square square-purple"></div>
  </div>
</div>

<button id="sort">Sort Orange</button>

Answer 2

使用此jquery：

$('#sort').on('click', function() { $("row").eq(0).css("min-height",$(".square-red").height()+"px"); $(".square:not(.square-orange)").fadeOut().slideUp(); $(".square-red").parent().slideUp();}）;

Answer 3

试试这个：

$('#sort').on('click', function() {
  $('.square').each(function() {
     if (!$(this).hasClass('square-orange')) {
       $(this).animate({
         opacity: 0
       }, 500, function() {
         $(this).slideUp(100);
       });
     } 
  });
});

https://jsfiddle.net/7efagjhj/7/

Answer 4

您可以将td.price { direction: ltr !important; }的{{1}}和position设置为.square-orange，并在#sort开始前设置absolute top，当.position().top元素动画完成时，使用.fadeOut()，.promise()为.animate()设置动画

＆＃13;

.square-orange

＆＃13;

.square:not(.square-orange)

＆＃13;

$('#sort').on('click', function() {

  $(this).add(".square-orange")
    .each(function() {
      $(this).css({
        "position": "absolute",
        top: $(this).position().top
      })
    })

  $('.square:not(.square-orange)').each(function() {
    $(this).fadeOut();
  })
  .promise()
    .then(function() {
      $(".square-orange")
        .animate({
          top: 20
        }, 1000, "linear")
    })

});

＆＃13;

jsfiddle https://jsfiddle.net/7efagjhj/8/

使用jQuery在fadeOut（小提琴）之后动画DIV的重新定位？

4 个答案: