#jquery #css #animation
#jquery #css #Анимация
Вопрос:
Я пытаюсь анимировать серию результатов из запроса к базе данных с помощью jQuery.
Во-первых, я хотел бы, чтобы это отображалось аналогично примеру из веб-руководства Со Танаки. Но я также хочу добавить поведение, при котором, когда пользователь нажимает на тот, на который он наведен, он расширяется, чтобы заполнить весь родительский элемент (в этом примере это a ), используя jQuery .
Я надеялся, что это произойдет «над» другими элементами, возможно, с использованием z-index . но я хочу, чтобы элемент расширялся относительно его положения на странице.
Выберите элемент, наведенный курсором мыши, согласно руководству Со Танаки
Этот элемент анимируется и расширяется таким образом
Но этот нужно анимировать по-другому
Конечная позиция элемента после анимации
Я также хотел бы, чтобы изображение элементов отображалось в верхнем левом углу, а дополнительные детали исчезали в увеличенном окне после завершения анимации.
Было бы также неплохо, если бы они могли нажать кнопку «Назад», и анимация повторилась. Я не уверен, должно ли это быть какое-то наложение, например, световой короб или что-то в этом роде, поскольку я не хочу, чтобы другие элементы перемещались, чтобы выбранный элемент был анимирован
Надеюсь, у кого-нибудь есть предложение
Dan
Ответ №1:
Я создал реализацию jsfiddle того, о чем вы, кажется, просите.
Просто добавьте свое изображение в поле div.
Дайте мне знать, если я смогу оказать дальнейшую помощь
Редактировать
Обновил мой пример, чтобы включить надлежащий эффект наведения, который вы просили.
Требуется только небольшая тонкая настройка. Большая часть кода javascript могла бы, например, использоваться совместно с обычными функциями. Но я оставлю эту задачу на ваше усмотрение. В любом случае, вот рабочий пример того, что вы просили. Все, что вам нужно сейчас, это добавить свой контент и точно настроить его.
Редактировать
Мне немного стыдно это говорить. Но, похоже, я ничего не мог с собой поделать. я добавил еще несколько эффектов к приведенному примеру. Итак, вот еще одна версия 😉