Как динамически загружать элементы страницы (т. Е. Изображения) с помощью анимации?

Question

У меня есть 2-рядная сетка из трех столбцов больших квадратов, на которой я собираюсь разместить миниатюрные ссылки внутри для категорированной навигации. Однако я буду беспокоиться о элементах в квадратах, поскольку этот вопрос относится к самим квадратам.

Во-первых, я хочу предварительно загрузить все элементы и отобразить их сразу. Эта часть не требует эффекта анимации. Они могут просто появляться, как обычно.

Во-вторых, я хочу, чтобы эта сетка квадратов заходила. Остальная часть страницы и квадраты могут появляться одновременно, так как они будут загружены вместе. Однако эта часть требует эффекта анимации; Я хочу, чтобы квадраты и их дочерние элементы увеличивались от ничего.

См. Эффект «зум» here.

В-третьих, я хотел бы загружать/анимировать в квадратах в последовательном порядке, от первого до последнего, каждый из которых поступает индивидуально (или слегка перекрывается). Я уверен, что сейчас мы просто говорим о параметрах.

Ну, вот и все. Я знаю, что это высокий порядок, но я довольно новичок в jQuery, поэтому, надеюсь, кто-то может помочь хотя бы с некоторыми из них!

Answer 1

Я создал плагин, чтобы сделать что-то похожее на это. Посмотрите на это здесь: https://github.com/navgarcha/jquery-slotload

Вы можете использовать опцию onComplete для перемещения загруженных элементов до первого изображения .loading, чтобы они отображались в последовательности.

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

Не стесняйтесь разорвать код, который вам подходит.