"Fly-in" анимация с помощью jQuery

Question

У меня есть автозаполнение на моем сайте, и когда пользователь выбирает из него элемент, он добавляется в список токенов справа. Я хотел бы сделать очевидным, что выбор автозаполнения был добавлен в список токенов. Как я могу использовать jQuery, чтобы четко оживить это?

Я думал о том, что, возможно, текст «влетит» в область токена, но я открыт для всего, что будет полезно, чтобы сделать очевидным для пользователей, что токен добавлен. Другие варианты включают в себя мигание токена, когда он появляется, или всплывающую подсказку. Хотелось бы получить информацию о том, что будет наиболее эффективным и где я могу найти документацию.

Answer 1

Желаемую анимацию полета не сложно реализовать.Вам просто нужно использовать animate с настройками:

1. позиция: абсолютная
2. top: (верх цели)
3. left: (слева от цели)

при обратном вызове вы переводите позицию обратно в «статический» и переносите элемент из одного узла в другой.

Сделан небольшой пример: http://jsfiddle.net/doktormolle/adcvK/

Answer 2

Я бы предложил эффект выделения, доступный из пользовательского интерфейса jQuery. Вы бы назвали его новым элементом после того, как он присоединился к списку. Это простой трюк с синтаксисом, подобным следующему:

$('target').effect("highlight", {}, 3000);

В основном, элемент светится цветом фона на выбранную длительность. Цвет может либо исчезать, либо исчезать. Это довольно хорошо узнаваемый эффект, показывающий, что что-то было добавлено.

Более подробную информацию вы можете найти в документации по jQuery UI: http://docs.jquery.com/UI/Effects/Highlight

Answer 3

http://jqueryui.com/demos/effect/

Проверьте эффект "передачи" в раскрывающемся списке

Answer 4

В git hub есть плагин для jQuery, который очень удобен для этого.https://github.com/s-a/jQuery-flyTo-Plugin