Как оживить восстановление элемента после использования эффекта размера?

Question

Я использую эффект размера, чтобы уменьшить высоту моего элемента со 100 до 80 пикселей. Позже я хочу вернуть элемент в исходное состояние, однако использование эффекта размера снова приводит ко многим незначительным стилям CSS (что и ожидается).

Как правильно оживить восстановление этого элемента?

Другими словами, если я это сделаю:

$("my_element").effect("size", { to: { height: "80px" } });

как мне оживить $("my_element"), чтобы вернуться к состоянию, в котором оно было до изменения размера?

Методы, которые я придумаю, беспорядочные и очень зависят от внутренней реализации эффекта размера.

EDIT:

делать это недостаточно хорошо:

$("my_element").effect("size", { to: { height: "100px" } });

, так как многие другие стили привязаны к элементу.

Answer 1

Элемент данных - ваш друг здесь. Просто установите начальное значение так:

$('#my_element').data('height', $('#my_element').height()).effect("size", { to: { height: "80px" } });

Тогда, когда вам нужно вернуться:

$('#my_element').effect("size", { to: { height: $('#my_element').data('height') +"px" } });

(отредактировано на основе вашего комментария) Поскольку вы меняете много свойств, я предложу этот маршрут. Я не знаю, будет ли это лучшим решением, но оно будет работать.

Создайте глобальный объект для хранения состояния элементов, которые вы хотите анимировать.

var elementState = {};

для каждого элемента, который вы будете анимировать, сохраните его начальное состояние. Вы можете создать своего рода ассоциативный массив (просто именованные свойства объекта), используя идентификаторы ваших элементов.

elementState['my_element'] = $('#my_element')[0].style;

Здесь будет храниться атрибут style объекта. Чтобы получить эту информацию, когда вы хотите вернуться, вы можете сделать:

//put the height back to normal
$('#my_element').effect("size", { to: { height: elementState['my_element'].height + "px" } });

Answer 2

Вы можете сохранить копию элемента .clone (), а затем при запуске события завершения вашего эффекта заменить элемент в DOM копией, которую вы сделали до каких-либо эффектов.