Анимация для добавления элементов DOM с jQuery
Хотя можно передать ссылку на массив, потому что массивы затухают к указателям в вызовах функции, когда они не связываются с параметры ссылки, и можно использовать указатели точно так же, как массивы, более распространено использовать массивы в вызовах функции как это:
void ModifyArray( int arr[][80] );
или эквивалентно
void ModifyArray( int (*arr)[80] );
Внутренняя часть функция, прибытие может использоваться почти таким же способом, как будто объявление функции было:
void ModifyArray( int (&arr)[80][80] );
единственный случай, где это не содержит, - когда для вызванной функции нужна статически проверенная гарантия размера первого индекса массива.
5 ответов
Раньше я вставлял 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 ().
Вы можете сделать что-то вроде:
...click(function() {
$(...).hide().appendTo(...).fadeIn();
}
Попробуйте что-то вроде этого:
$("selector").hide().fadeIn(1000);
где 1000 - это скорость, с которой элемент может исчезать. Я помещаю hide () туда, предполагая, что новый элемент DOM виден при создании, не уверен, нужен он или нет. Лучше всего поставить «display: none» на новый элемент при его создании, а затем просто использовать fadeIn ().
Есть и другие эффекты, которые вы также можете использовать, например, slideUp / slideDown, так что вы можете изучить их тоже.
Вы можете выбрать любую анимацию.
Вы можете сделать простое шоу
$("#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.