Panduan untuk menulis kesan animasi dalam jQuery library_Basics JavaScript

Kaedah animasi yang biasa digunakan dalam jquery ialah hide() dan show().

$(elemen).hide() Kod ini boleh bersamaan dengan elemen ini.css("display","none")

Isikan peristiwa dalam sembunyi(masa) dan tunjukkan(masa), dan ia perlahan-lahan boleh hilang dan muncul. Anda boleh mengubah suai berbilang gaya, ketinggian, lebar dan kelegapan elemen.

Satu lagi set kaedah fadeIn() dan fadeOut() adalah berbeza daripada hide and show kerana apabila hide atau show digunakan, ketinggian halaman web akan ditukar, manakala fadeIn dan fadeOut tidak akan.

$"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   .

Ringkasan kaedah animasi

Baris Gilir Animasi

(1) Kesan animasi pada set elemen.

a) Apabila menggunakan berbilang sifat dalam satu kaedah animate(), animasi berlaku serentak.

b) Apabila kaedah animasi digunakan secara berantai, animasi berlaku mengikut urutan.

(2) Kesan animasi pada berbilang kumpulan elemen

a) Secara lalai, semua animasi berlaku serentak.

b) Apabila kaedah animasi digunakan dalam bentuk panggilan balik, animasi berlaku dalam susunan panggilan balik.

Di samping itu, dalam kaedah animasi, sedar bahawa kaedah bukan animasi lain akan melompat dalam baris gilir, seperti kaedah css() Untuk menjadikan kaedah bukan animasi ini juga dilaksanakan mengikut urutan, kaedah ini perlu ditulis dalam fungsi panggil balik kaedah animasi.

Berikan contoh bernyawa:

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){


     $(this).css(“border”,”1px solid blue”);


});

Jika anda mahu animasi berhenti, anda perlu memasukkan kaedah stop()

sebelum kaedah animate()

Contohnya: $("#id").stop().animate() Perhatikan dua parameter dalam stop.

Kaedah untuk menentukan sama ada elemen berada dalam keadaan animasi:

$(element).is(“:animated”);

jQuery boleh menambahkan beberapa kesan dinamik dengan mudah pada elemen pada halaman Anda boleh menggunakan kesan terbina dalam atau anda boleh menentukan kesan anda sendiri.

Berikut ialah beberapa kaedah kesan terbina dalam:

• $.fn.show Tunjukkan elemen yang dipilih
• $.fn.hide Sembunyikan elemen yang dipilih
• $.fn.fadeIn pudar masuk
• $.fn.fadeOut fadeout
• $.fn.slideDown memaparkan elemen melalui kesan gelongsor menegak
• $.fn.slideUp menyembunyikan unsur melalui kesan China menegak
• $.fn.slideToggle Tunjukkan atau sembunyikan pelaksanaan interaksi gelongsor

Contoh mudah:

$('h1').show();

Tetapkan tempoh kesan animasi

Untuk $.fn.show dan $.fn.hide, tempoh lalai ialah 0. Tempoh lalai untuk kesan lain biasanya 400 milisaat, anda juga boleh menetapkan sendiri tempoh:

$('h1').fadeIn(300);   // 300 毫秒
$('h1').fadeOut('slow'); // slow 是内建的速度常量

Pemalar kelajuan lalai jQuery terletak dalam objek jQuery.fx.speeds:

speeds: {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
}

Kami juga boleh memanjangkan objek ini dan menambah nilai kelajuan kami yang biasa digunakan:

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

Fungsi panggil balik

Jika anda ingin melaksanakan beberapa kod selepas kesan animasi tamat, anda boleh menggantikan kaedah animasi ini dengan fungsi panggil balik:

$('div.old').fadeOut(300, function() {
 $(this).remove();
});

Jika tiada elemen dipadankan dalam pemilih, fungsi panggil balik tidak akan dilaksanakan, jadi perlu membuat pertimbangan sebelum melaksanakan fungsi panggil balik:

var $thing = $('#nonexistent');

var cb = function() {
  console.log('done!');
};

if ($thing.length) {
  $thing.fadeIn(300, cb);
} else {
  cb();
}

Kaedah animasi tersuai

Kaedah $.fn.animate dalam jQuery boleh digunakan untuk memanjangkan animasi tersuai kami Ini terutamanya dicapai dengan menetapkan sifat CSS unsur melalui kaedah animasi Apabila menetapkan sifat CSS unsur, anda boleh menggunakan nilai mutlak atau nilai relatif:

$('div.funtimes').animate(
  {
    left : "+=50",
    opacity : 0.25
  },
  300, // 时长
  function() { console.log('done!'); // 回调函数
});

Walau bagaimanapun, apabila menggunakan $.fn.animate untuk mencipta kesan animasi tersuai, warna elemen tidak boleh ditukar. Jika anda ingin mencipta animasi berwarna, anda perlu bergantung pada beberapa pemalam warna lain.
Gaya animasi

jQuery mempunyai dua gaya animasi terbina dalam: hayunan dan linear

$('div.funtimes').animate(
  {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ]
  },
  300
);

Kawal animasi

jQuery menyediakan beberapa kaedah untuk mengawal pelaksanaan animasi:

$.fn.stop menghentikan animasi yang sedang dilaksanakan

$.fn.delay menjeda animasi untuk tempoh masa:

$('h1').show(300).delay(1000).sorok(300);

jQuery.fx.off: Matikan kesan peralihan animasi, yang bersamaan dengan menetapkan tempoh kepada 0.