Fungsi animasi jQuery merealisasikan animasi penukaran imej dan teks effect_jquery

Pada beberapa laman web gambar, kita dapat melihat bahawa apabila memaparkan gambar, anda boleh melihat maklumat pengenalan teks gambar dengan meluncur perlahan tetikus ke atas gambar Malah, proses animasi seperti itu boleh direalisasikan dengan menggunakan fungsi animasi jQuery .

<div class="wrap"> 
  <img src="images/s1.jpg" alt="photo" /> 
  <div class="cover"> 
    <h3>强震摧毁加勒比海小国海地</h3> 
    <p>今年，战争、经济动荡和自然灾害席卷全球，制造了无数的伤痛；但是，在痛苦的同时仍有明亮的瞬间存在。</p> 
    <p><a href="#">查看详情</a></p> 
  </div> 
</div>

Kami menggunakan DIV.wrap untuk meletakkan imej, dan div.cover yang perlu dilindungi Kulit meletakkan maklumat pengenalan imej dan menyokong sebarang kandungan html standard. Kemudian salin kod di atas beberapa kali dan susunkannya ke dalam sekumpulan gambar.

CSS

Kita perlu menggunakan CSS untuk membariskan .wrap dan menyembunyikan bahagian tindanan .cover Apabila tetikus meluncur ke atas, ia akan dipaparkan dengan memanggil jquery.

.wrap{position:relative; float:left; width: 200px; height:200px; margin:5px; 
background:#e8f5fe; overflow:hidden;} 
.wrap img{position:absolute; top:0; left:0} 
.wrap h3{line-height:30px; font-size:14px; color:#fff} 
.wrap p{line-height:20px} 
.cover{position:absolute; background:#000; height:120px; width:100%; 
padding:3px; top:170px; } 

Perlu diambil perhatian bahawa bahagian .cover tersembunyi menggunakan position:absolute absolute positioning Overlay .cover hanya memaparkan bahagian tajuk Anda hanya perlu menetapkan top:170px, kerana ketinggian .wrap ini ialah 200px dan. tajuk h3 ialah Ketinggian ialah 30px, ditolak.

jQuery

Mula-mula saya tetapkan ketelusan tindanan kepada 0.8, dan kemudian gunakan fungsi tuding untuk memanggil animasi animasi apabila tetikus meluncur ke atas imej.

$(function(){ 
  $(".cover").css("opacity",.8); 
  $(".wrap").hover(function(){ 
    $(".cover", this).stop().animate({top:"80px"},{queue:false,duration:160}); 
  },function(){ 
    $(".cover", this).stop().animate({top:"170px"},{queue:false,duration:160}); 
  }); 
}); 

Fungsi animasi ialah fungsi yang digunakan jQuery untuk mencipta animasi tersuai. Kunci kepada fungsi ini adalah untuk menentukan bentuk animasi dan objek atribut gaya hasil. Setiap sifat dalam objek ini mewakili sifat gaya yang boleh berubah (seperti "ketinggian", "atas", atau "kelegapan"). Nilai setiap atribut menunjukkan nilai atribut gaya ini apabila animasi tamat. Jika ia ialah nilai berangka, sifat gaya akan bercerunan daripada nilai semasa kepada nilai yang ditentukan. Jika nilai rentetan seperti "sembunyikan", "tunjukkan" atau "togol" digunakan, borang animasi lalai digunakan untuk harta tersebut.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya,