动画浮动元素

我有一个元素列表:

  
Element 1
  
Element 2
  
Element 3
  
Element 4
  
Element 5
  
Element 6

这些的CSS是:

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

然后ul标签是:

white-space: nowrap;

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

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

这是jsfiddle

我如何得到它,以便移动其他元素并滚动各种动画.

谢谢!

您需要转换几个属性或值,但浏览器不支持这些属性或值.可动画CSS属性列表

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

  
Element 1
  
Element 2
  
Element 3
  
Element 4
  
Element 5
  
Element 6