Анимация для добавления элементов DOM с помощью jQuery

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

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

Я никогда раньше не использовал анимацию в jQuery и нашел только примеры для работы с существующими элементами DOM. какой шаблон следует использовать для анимации создания новых элементов в jQuery?

8
animation dom jquery

5 ответов

то, что я сделал в прошлом,-это вставить заполнитель нулевого размера-divs в тот момент, когда я хочу вставить свой новый элемент.

затем я анимирую этот заполнитель до нужного размера, а затем вставляю скрытый версия элемента, который я хочу показать внутри заполнителя и скрыть его в поле зрения.

после завершения затухания я "разворачиваю" заполнитель, чтобы удалить его, используя следующий код:

    // Essentially, this does the opposite of jQuery.wrap. Here is an example:
    //
    //      jQuery('p').wrap('<div></div>');
    //      jQuery('p').parent().unwrap().remove();
    //
    // Note that it is up to you to remove the wrapper-element after its
    // childNodes have been moved up the DOM
    jQuery.fn.unwrap = function () {
        return this.each(function(){
            jQuery(this.childNodes).insertBefore(this);
        });
    };

все функции анимации jQuery имеют "onComplete" обработчики, которые позволяют запускать различные части анимации, как только они будут завершены, так что это не слишком много работы, чтобы достичь всего этого.

кроме того, очень полезно сохранить модель JavaScript всех ваших элементов вместо того, чтобы полагаться на медленный обход DOM и jQuery .данных() метод.

3

вы можете сделать что-то вроде:

...click(function() {
    $(...).hide().appendTo(...).fadeIn();
}
28

попробуйте что-то вроде этого:

$("selector").hide().fadeIn(1000);

где 1000-скорость, с которой элемент может исчезать. Я поместил hide () туда, предполагая, что новый элемент DOM виден при создании, не уверен, нужен ли он или нет. Лучше всего поставить "display: none" на новый элемент при его создании, а затем просто использовать fadeIn().

есть и другие эффекты, которые вы можете использовать, как slideUp / slideDown, так что вы можете посмотреть в них тоже.

5

простой fadeIn обычно работает хорошо.

2

вы можете пойти на любую анимацию. Вы можете пойти на простой show

$("#element").show("slow") // or "normal" or "fast"
// or
$("#element").show(1000) // 1000 milliseconds

или как предлагалось ранее, fadeIn. Опять же, вы можете решить скорость-как в show. Или вы можете пойти на пользовательскую анимацию.

$("#element").animate({
    opacity: 1, // Will fade the object in
    fontSize: "14px", // Will animate the font size too
}, 1000); // 1000 milliseconds

Go здесь для документации по эффектам jQuery.

2