All geek questions in one place

Animation for moving: visualization of a change in position

I have a list of elements that can be displayed both vertically and horizontally:

http://jsbin.com/olefi3/2

Switching between these two modes currently leads to a rather sharp user experience, as elements move quite suddenly (as CSS classes are applied / removed). This would help a lot, so that each element gradually moves to a new place, which makes it easier for users to orient themselves.

I know that jQuery animation method does not work for float. Although I can imagine a solution, it seems rather complicated:

  • create an invisible clone of each element
  • apply the desired style (vertical / horizontal)
  • record new clone position
  • remove clones
  • revive actual positions in recorded positions
  • apply the desired style to the actual elements
  • remove inline styles from animation

Before I start inventing the wheel, does something like this already exist?

+3
source share
2 answers

A plugin you'll probably enjoy is an isotope. The isotope will reorder content blocks using CSS3 and return to jquery-animate. Check this out: isotope

+3
source

First you need to enable the jqueryui library immediately after you enable the jquery library to call .toggleClass()for animation in general

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

This brings you closer to what you are looking for.

Luck

+1
source

Source: https://habr.com/ru/post/1750638/

More articles:


All Articles