Animate a floating element

Question

I have a list of elements that :

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

The CSS for these are :

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

Then the ul tag is :

white-space: nowrap;

onClick I add a class which floats the element left. So they're all in a row. onClick whatever element I select floats to the left (first in the row).

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

Here's the jsfiddle

How do I get it so it moves the other elements and scrolls across kind of animated.

Thanks!

Answer 1

There are several properties or values you’ll want to transition, but which are not supported by browsers. List of animatable CSS properties

float is not a css3 animatable property.

You can try this patch:

    $('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

Unfortunately you can't use CSS to animate float properties. The following SO post has an interesting solution to your problem: Javascript animate CSS float property

If you still want to animate and not use floats, you can try using a solution employing margins. To fix the problem of spacing between list elements, you can just animate to negative margin values.

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/