Rumah > Artikel > hujung hadapan web > nota kajian kesan animasi jquery (8 kesan)_jquery

nota kajian kesan animasi jquery (8 kesan)_jquery

WBOYasal: 2016-05-16 15:32:371178semak imbas

1. Menunjukkan dan menyembunyikan elemen

paparkan:tiada; sembunyikan
paparan:sekat;

Kaedah yang mudah ditunjukkan dan disembunyikan

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").hide();//display:none
    //document.getElementById('id').style.display="none";
  }
  function f2(){
    //显示
    $("div").show();//display:block
  }
  function f3(){
    $("div").toggle();
  }
</script>
<style type="text/css">
   div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
</body>

CSS menyokong dua kaedah untuk memaparkan dan menyembunyikan elemen, iaitu menggunakan gaya keterlihatan atau paparan Mereka mempunyai kesan yang sama apabila mengawal paparan dan menyembunyikan elemen, tetapi hasilnya berbeza.

Arahan khusus adalah seperti berikut:

2. Tunjukkan dan sembunyikan kesan gelongsor

Kelajuan: Tetapkan kelajuan kesan (perlahan (600) biasa (400) cepat (200) masa (milisaat))

Panggilan balik: Fungsi panggil balik dipanggil secara automatik selepas kesan dilaksanakan

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").slideUp(3000,function(){
      alert('我消失了，你能看到么');
    });
  }
  function f2(){
    //显示
    $("div").slideDown(3000,function(){
      alert('我又回来了');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    //气缸滑动效果
    //setInterval("f3()",1000);
  });
</script>

<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
 </body>

3. Kesan pudar

Benarkan elemen dipaparkan dan disembunyikan melalui perubahan ketelusan tertentu

<script type="text/javascript"> 
  function f1(){
    //隐藏
    $("div").fadeOut(4000);
  }
  function f2(){
    //显示
    $("div").fadeIn(4000);
    $("#two").fadeTo(2000,0.3);
  }

  function f3(){
    $("div").fadeToggle(2000);
  }

</script>
<style type="text/css">
  div {width:300px; height:200px; background-color:blue;}
</style>
<body>
  <div id = "two">duck and dog</div>

  <input type="button" value="隐藏" onclick="f1()" />
  <input type="button" value="显示" onclick="f2()" />
  <input type="button" value="开关效果" onclick="f3()" />
</body>

Tetapkan ketelusan, ketelusan div ialah 30%:

4. Kaedah asas animasi kesan animasi()

show() hide() dan kesan animasi lain secara dalaman melaksanakan kaedah animate()

$().animate(css效果参数[，时间][，回调函数]);

Kaedah jquery umum seperti css() akan mengembalikan objek jquery semasa selepas pelaksanaan, jadi banyak kaedah jquery boleh dipanggil dalam rantai.

 <script type="text/javascript">
  function f1(){
    //文字大小、文字粗体、div本身宽度和高度
    //font-size background-color color

    console.log($("div"));
    //jquery对象调用完毕css方法本身还是一个jquery对象
    //说明css方法执行完毕有return this关键字
    console.log($("div").css('font-weight','bold').css("background-color",'pink')); 

    var jn = {'font-size':'30px',width:'400px',height:'300px'};
    $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);

    //$("div").animate(jn,2000);
  }

</script>

<style type="text/css">
  div {width:300px; height:200px; background-color:blue; }
</style>

<body>
  <div>duck and dog</div>
  <input type="button" value="设置" onclick="f1()" />
</body>

5. Animasi pengumpulan dan penolakan

Jika animasi ditetapkan ke kiri: 500 pada satu masa, klik pertama pada div akan mengalihkan 500 piksel ke kiri, dan klik kedua tidak akan bergerak. Pengumpulan, pengumpulan dan penolakan ialah pergerakan berterusan Hanya tukar kiri: "500px" ke kiri: " =500px" atau kiri: "-=500px".

(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "+=500px"}, 3000); 
  }) 
})</span>

6. Berbilang animasi

1. Laksanakan berbilang animasi pada masa yang sama
Contoh di atas hanya mengawal perubahan atribut kiri Kali ini apabila kita mengawal atribut kiri, kita juga mengawal ketinggian elemen kepada 200px.

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px",height:"200px"}, 3000); 
  }) 
})

2. Laksanakan animasi secara berurutan

Dalam contoh di atas, dua animasi mengalihkan elemen ke kanan dan membesarkan ketinggian dilakukan secara serentak. Sekarang kita perlu bergerak ke kanan dahulu dan kemudian membesarkan ketinggian Ia sangat mudah. Kita hanya perlu membahagikan kaedah animate() di atas dan menulisnya kepada dua

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px"},3000) 
       .animate({height:"200px"},1000); 
  }) 
})

3. Animasi Komprehensif

Animasi yang lebih kompleks dilakukan seterusnya. Klik pada elemen div untuk mengalihkannya ke kanan sambil meningkatkan ketinggiannya dan menukar kelegapannya daripada 50% kepada 100%. Kemudian biarkan ia bergerak dari atas ke bawah sementara lebarnya menjadi lebih besar Apabila ini selesai

Selepas beberapa kesan, ia akan disembunyikan dengan pudar.

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000) 
       .fadeOut(1000); 
  }) 
})

7. Fungsi panggil balik animasi

Dalam contoh di atas, jika anda ingin menukar gaya css dan bukannya menyembunyikan elemen dalam langkah terakhir. Kini kita boleh menggunakan fungsi panggil balik parameter ketiga bagi animasi

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")}); 

  }) 
})

Ini menambah kaedah css pada baris gilir animasi.

8 Hentikan animasi dan tentukan sama ada ia dalam keadaan animasi

1 Hentikan animasi elemen

stop([clearQueue][,gotoEnd]) Kedua-duanya adalah parameter pilihan, kedua-duanya jenis boolean

Perihalan parameter:

clearQueue: mewakili sama ada hendak mengosongkan baris gilir animasi yang belum selesai

gotoEnd: mewakili sama ada untuk melompat ke keadaan akhir animasi yang sedang dilaksanakan
Anda boleh memahami dua parameter kaedah stop() ini melalui contoh komprehensif:

<style type="text/css"> 
  *{margin:0;padding:0;}  
  body { font-size: 13px; line-height: 130%; padding: 60px } 
  #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} 
  .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;} 
  .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;} 
</style> 
<script src="../../../scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  $(function(){ 
     $("button:eq(0)").click(function () { 
       $("#panel") 
        .animate({height : "150" } , 2000 ) 
        .animate({width : "300" } , 2000 ) 
        .hide(3000) 
        .animate({height : "show" , width : "show" , opacity : "show" } , 2000 ) 
        .animate({height : "500"} , 2000 ); 
     }); 
     $("button:eq(1)").click(function () { 
       $("#panel").stop();//停止当前动画，继续下一个动画 
     }); 
     $("button:eq(2)").click(function () { 
       $("#panel").stop(true);//清除元素的所有动画 
     }); 
     $("button:eq(3)").click(function () { 
       $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画 
     }); 
     $("button:eq(4)").click(function () { 
       $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态  
     }); 

  }) 
</script> 

<body> 
  <button>开始一连串动画</button> 
  <button>stop()</button> 
  <button>stop(true)</button> 
  <button>stop(false,true)</button> 
  <button>stop(true,true)</button> 
  <div id="panel"> 
    <h5 class="head">三国杀杀天下</h5> 
    <div class="content"> 
      夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情 
    </div> 
  </div> 
</body> 
</html>

2. Tentukan sama ada elemen dalam keadaan animasi

Apabila menggunakan kaedah animate(), elakkan ketidakkonsistenan antara animasi dan gelagat pengguna yang disebabkan oleh pengumpulan animasi. Pengumpulan animasi berlaku apabila pengguna dengan pantas melakukan animasi animate() pada elemen.

Penyelesaian adalah untuk menentukan sama ada elemen berada dalam keadaan animasi dan hanya menambah animasi baharu pada elemen apabila ia tidak berada dalam keadaan animasi.

Penggunaan:

if(!$(element).is(":animated")){ 
  //添加新的动画 
}

Melalui analisis terperinci artikel ini tentang 8 kesan animasi jquery, anda boleh bermain dengan kesan animasi jquery saya harap anda akan menyukai artikel ini yang menyediakan pengenalan menyeluruh kepada kesan animasi jquery.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ringkasan pembelajaran javascript harian (objek Boolean)_kemahiran javascriptArtikel seterusnya：Ringkasan pembelajaran javascript harian (objek Boolean)_kemahiran javascript

Artikel berkaitan

Lihat lagi