masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

fungsi animasi tersuai jQuery

Animasi jQuery - kaedah animate()

Kaedah jQuery animate() digunakan untuk mencipta animasi tersuai.

Sintaks: 

$(selector).animate({params},speed,callback);

Parameter params yang diperlukan mentakrifkan sifat CSS yang membentuk animasi.

Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas animasi selesai.

Contoh berikut menunjukkan aplikasi mudah kaedah animate() ia menggerakkan elemen <div> >

Petua: Secara lalai, semua elemen HTML mempunyai kedudukan statik dan tidak boleh dialihkan. Jika anda ingin beroperasi pada kedudukan, ingat untuk menetapkan sifat kedudukan CSS elemen kepada relatif, tetap atau mutlak! QQ截图20161024092524.png

jQuery animate() - Memanipulasi berbilang atribut

Sila ambil perhatian bahawa berbilang atribut boleh digunakan pada masa yang sama semasa penjanaan animasi: 

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({left:'250px'});  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

Petua: Anda boleh menggunakan kaedah animate() untuk memanipulasi semua sifat CSS Walau bagaimanapun, terdapat satu perkara penting yang perlu diingat: apabila menggunakan animate(), anda mesti menggunakan Tag unta Semua nama harta tidak boleh ditulis, contohnya, paddingLeft mesti digunakan bukannya padding-left, marginRight mesti digunakan bukannya margin-right, dsb. Selain itu, animasi warna tidak termasuk dalam perpustakaan jQuery teras. Jika anda perlu menjana animasi berwarna, anda perlu memuat turun pemalam Animasi Warna daripada jQuery.com. QQ截图20161024092556.png

jQuery animate() - Menggunakan nilai relatif

Anda juga boleh menentukan nilai relatif ( nilai adalah relatif kepada nilai semasa unsur). Anda perlu menambah += atau -= di hadapan nilai: 


<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>  
 
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({  
      left:'250px',  
      opacity:'0.5',  
      height:'150px',  
      width:'150px'  
    });  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>

jQuery animate() - menggunakan nilai pratakrif


Anda juga boleh menghidupkan nilai harta untuk "menunjukkan", "menyembunyikan" atau "menogol": 

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({  
      left:'250px',  
      height:'+=150px',  
      width:'+=150px'  
    });  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

QQ截图20161024092639.png

jQuery animate() - Menggunakan fungsi baris gilir

Secara lalai, jQuery menyediakan fungsi baris gilir untuk animasi. Ini bermakna jika anda menulis berbilang panggilan animate() selepas satu sama lain, jQuery mencipta baris gilir "dalaman" yang mengandungi panggilan kaedah tersebut. Kemudian jalankan panggilan bernyawa ini satu demi satu.

Contoh: Jika anda ingin melakukan animasi yang berbeza selepas satu sama lain, maka kami ingin memanfaatkan fungsi baris gilir

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({  
      height:'toggle'  
    });  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

QQ截图20161024092702.png

Meneruskan pembelajaran
||
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>jQuery Animation - fadeTo </title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function() { $("#divPop").animate( { "opacity": "hide", "width": $(window).width()-100 , "height": $(window).height()-100 }, 2000 ); }); </script> </head> <body> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;"> <div style="text-align: center;">pop div</div> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492837 permainan