Question

我有一个元素列表：

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
  <li>Element 5</li>
  <li>Element 6</li>
</ul>

这些的CSS是：

display: inline-block;
width: 45px;
height: 45px;

然后ul标签是：

white-space: nowrap;

onClick我添加了一个浮动元素的类。所以他们都是连续的。 onClick我选择的任何元素都会向左浮动（行中的第一个）。

$('li').on('click', function() {
  $(this).toggleClass('left_align');
});

Here's the jsfiddle

如何获取它以便移动其他元素并滚动到各种动画。

谢谢！

Answer 1

您需要转换几个属性或值，但浏览器不支持这些属性或值。 List of animatable CSS properties

float不是css3可动画的属性。

你可以尝试这个补丁：

    $('li').on('click', function() {
      $(this).toggleClass('left_align');
    });

li {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: red;
  transition: 500ms ease-in-out;
}
li:hover {
  cursor: pointer;
}
.left_align {
  position: relative;
  margin-left: -5px;
  background: yellow;
  transition: 500ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
  <li>Element 5</li>
  <li>Element 6</li>
</ul>

Fiddle here

Answer 2

很遗憾，您无法使用CSS为浮动属性设置动画。以下SO帖子为您的问题提供了一个有趣的解决方案： Javascript animate CSS float property

如果您仍想要动画而不使用浮动，则可以尝试使用利用边距的解决方案。要解决列表元素之间的间距问题，您可以设置为负边距值。

li {
    display: inline-block;
    width: 45px;
    height: 45px;
    background: red;
    transition: 2s ease-in-out;
    margin-left: 15px;
}
li:first-of-type {
   margin-left: 0;
}
li:hover {
  cursor: pointer;
}
.left_align {
  margin-left: -4px;;
  background: yellow;
  transition: 1s ease-in-out;
}

https://jsfiddle.net/37naqebd/

Answer 3

我发现在jQuery中执行此操作的最简单方法是重新排序元素并调整其“左”css值（您必须从li元素中删除浮点数，因为转换不适用于浮点数）：

   var lefts = [0,50,100,150,200,250]
   for (i=0; i<6; i++) {
        $('li:nth-child('+(i+1)+')').css('left', lefts[i]);
   }

   $('li').on('click', function() {
        // reorder clicked element to move it to the top of the list
        $(this).insertBefore($('li:nth-child(1)')); 

        //update element left values
        for (i=0; i<6; i++) {
            $('li:nth-child('+(i+1)+')').css('left', lefts[i]);
        }
   });

jsfiddle here。

动画浮动元素

3 个答案: