Apakah fungsi kaedah berhenti dalam javascript

Kaedah berhenti dalam JavaScript adalah untuk mengelakkan pengumpulan berulang dalam animasi atau peristiwa berterusan Format sintaks ialah "$(elemen). berhenti sama ada untuk menghentikan animasi dan sama ada untuk membenarkan animasi semasa disiapkan)" . Dua parameter sintaksis stop() ialah nilai Boolean.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Sebagai pembangun bahagian hadapan, JS dan JQuery ialah bahasa pembangunan dan perpustakaan alat yang sering kami gunakan. Kita semua tahu bahawa terdapat kaedah yang sangat berkuasa dalam jQuery - stop(), iaitu kaedah untuk menghalang pengumpulan berulang dalam animasi atau peristiwa berterusan. Jadi, bagaimana untuk menggunakan stop()? Mari perkenalkan anda untuk stop() dahulu:

stop() mempunyai dua parameter dalam sintaks, kedua-duanya ialah nilai Boolean. Kesemuanya adalah pilihan, tetapi terdapat juga peraturan, seperti berikut:

$(selector).stop(stopAll,goToEnd)

Parameter: (Secara lalai, jika tiada parameter ditulis, kedua-dua parameter akan dianggap palsu.)

stopAll : pilihan. Menentukan sama ada untuk menghentikan semua animasi beratur bagi elemen yang dipilih. Ini bermakna jika nilai parameter adalah benar, semua animasi atau peristiwa seterusnya akan dihentikan. Jika nilai parameter palsu, hanya animasi yang sedang dilaksanakan oleh elemen yang dipilih akan dihentikan dan animasi seterusnya tidak akan terjejas. Oleh itu, parameter ini biasanya palsu.

goToEnd: Pilihan. Menentukan sama ada untuk membenarkan animasi semasa dilengkapkan Parameter ini hanya boleh digunakan apabila parameter stopAll ditetapkan. Seperti yang kami katakan di atas, kami biasanya menulis nilai fasle untuk parameter stopAll, bukan lalai, tetapi parameter sebenar. Kemudian terdapat dua pilihan untuk parameter goToEnd, satu palsu dan satu lagi benar. Semua orang harus memahami maksudnya. Umumnya benar. Ini bermakna membenarkan animasi semasa disiapkan.

Berikut ialah kod yang sepadan:

HTML:

<div id="content">
    <div class="slide_box">
      <div class="img"> 
    <img  src="/static/imghwm/default1.png"  data-src="images/page_a.png"  class="lazy"   alt="Apakah fungsi kaedah berhenti dalam javascript" >
        <div class="start"> <a class="start_btn" href="javascript:void(0)">开始抽奖</a> </div>
      </div >
      <div class="img" style="display:none;" > 
    <img  src="/static/imghwm/default1.png"  data-src="images/page_b.png"  class="lazy"   alt="Apakah fungsi kaedah berhenti dalam javascript" > 
    <a class="rank_30" href="javascript:void(0);">30级</a> 
    <a class="rank_45" href="javascript:void(0);">45级</a> 
    <a class="rank_55" href="javascript:void(0);">55级</a> 
  </div>
      <div class="img" style="display:none;" > 
    <img  src="/static/imghwm/default1.png"  data-src="images/page_c.png"  class="lazy"   alt="Apakah fungsi kaedah berhenti dalam javascript" > 
    <a class="prize_notes" href="javascript:void(0);">奖品记录</a> 
  </div>
    </div>
</div>

CSS:

#content{/* margin-top:10em;*/ width:48em; margin:0 auto;}

#content div{ display:block; width:100%;}

#content div.cont_b{ position:relative; text-align:center;background:url(../images/content_bgb.jpg) no-repeat; background-size:100% 100%;}

#content div img{ display:block; width:100%; border:none;}

#content div .slide_box{ position:absolute; top:0px; width:100%; }

#content div .img .start{ position:absolute; top:290px;}

#content div .img a.start_btn{ display:block; width:150px; height:150px; text-indent:-9999px;  margin:0 auto;}/*修改*/

#content div .img a.rank_30{ position:absolute; top:230px; left:70px; display:block; width:250px; height:60px; text-indent:-9999px;}

#content div .img a.rank_45{ position:absolute; top:230px; left:460px; display:block; width:250px; height:60px; text-indent:-9999px;}

#content div .img a.rank_55{ position:absolute; top:430px; left:170px; display:block; width:280px; height:60px; text-indent:-9999px;}

#content div .img a.prize_notes{ position:absolute; top:470px; right:50px; display:block; width:150px; height:150px; text-indent:-9999px;}

JS_jQuery:

var page =$(".slide_box .img");

var page_num = page.length;

var num = 0;

    $(".next_btn").click(function(e){

    if(num < 2){

page.slideUp().stop(false,true).eq(num+1).slideDown();

num++;

}else{

page.slideUp().stop(false,true).eq(0).slideDown();

num = 0;

}

});

});

Di atas ialah pengumpulan peristiwa yang ditemui semasa menulis kesan acara klik di tempat kerja, kaedah stop() berguna. Semoga ia membantu semua orang.

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Apakah fungsi kaedah berhenti dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!