Kesan jQuery - Animasi

Kaedah

animate()

kaedah jQuery animate() digunakan untuk mencipta animasi tersuai.

Sintaks:

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

Definisi parameter params yang diperlukan untuk membentuk CSS animasi hartanah.

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>向右移动</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Nota:

Secara lalai, semua elemen HTML mempunyai kedudukan statik dan tidak boleh dialihkan.
Jika anda perlu mengendalikan kedudukan, ingat untuk menetapkan sifat kedudukan CSS elemen kepada relatif, tetap atau mutlak terlebih dahulu!

animate() - Manipulasi berbilang sifat

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.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>逐渐变大</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Bolehkah kaedah animate() digunakan untuk memanipulasi semua sifat CSS?
Ya, hampir! Walau bagaimanapun, terdapat satu perkara penting yang perlu diingat: apabila menggunakan animate(), anda mesti menggunakan notasi Camel untuk menulis semua nama harta, contohnya, anda mesti menggunakan paddingLeft dan bukannya padding-left, gunakan marginRight dan bukannya margin-right, dsb. . Selain itu, animasi warna tidak termasuk dalam pustaka jQuery teras.

animate() - gunakan nilai relatif

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() - gunakan nilai pratakrif

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<p>收起</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() - gunakan 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 akan mencipta baris gilir "dalaman" yang mengandungi panggilan kaedah tersebut. Kemudian jalankan panggilan bernyawa ini satu demi satu.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<p></p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("button:first").click(function() { $("#block").animate({ left: "-=80px" //相对左移 }, 300); }); $("button:last").click(function() { $("#block").animate({ left: "+=80px" //相对右移 }, 300); }); }); </script> <style type="text/css"> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 15px; padding: 15px; text-align: center; position: absolute; } </style> </head> <body style="margin-left:200px;"> <button><--GO</button> <button>Go--></button> <div id="block">动画！</div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Kesan jQuery - Animasi

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]