Анимация для добавления элементов DOM с помощью jQuery - PullRequest
9 голосов
/ 26 октября 2009

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

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

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

Ответы [ 5 ]

29 голосов
/ 26 октября 2009

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

...click(function() {
    $(...).hide().appendTo(...).fadeIn();
}
6 голосов
/ 26 октября 2009

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

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

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

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

3 голосов
/ 26 октября 2009

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

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

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

    // 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 .data ().

2 голосов
/ 26 октября 2009

Вы можете пойти на любую анимацию. Вы можете пойти на простой 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

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

2 голосов
/ 26 октября 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...