animate melaksanakan kesan pensuisan gelongsor [kod contoh]

animate melaksanakan kesan pensuisan gelongsor [kod contoh]_jquery

WBOY

Lepaskan： 2016-05-16 15:01:50

asal

1327 orang telah melayarinya

Hari ini saya ingin berkongsi dengan anda satu contoh kecil penggunaan animasi untuk mencapai kesan pensuisan gelongsor

Semua orang tahu bahawa jQuery menyediakan beberapa kaedah untuk mencapai kesan gelongsor:

1.slideDown()
2.slideUp()
3.slideToggle()

Tetapi gelongsor di atas tidak sesuai untuk mengawal arah gelongsor, jadi sebaiknya kita tulis sendiri. . .

Kod adalah seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css">
      body{
        width: 100%;
        height: auto;
      }
      .content{
        width: 150px;
        height: 50px;
        position: absolute;
        top: 20px;
        left: 20px;
        overflow: hidden;
        background-color: red;
      }
      .slide-box{
        width: 300px;
        position: relative;
      }
      .slide1{
        width: 150px;
        height: 50px;
        float: left;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        background-color: #BDD8CF;
      }
      .slide2{
        width: 150px;
        height: 50px;
        float: right;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        background-color: #C1C4C4;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="slide-box clearfix">
      <span class="slide1">左边的元素</span>
      <span class="slide2">右边的元素</span>
    </div>
    </div>
    
    
  <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function(){
      $(".content").hover(function(){
        $(".slide-box").stop(true).animate({right:"150px"},'slow');
      },function(){
        $(".slide-box").stop(true).animate({right:"0"},'slow');
      });
    })
  </script>
  </body>
</html>

Salin selepas log masuk

Kod di atas boleh mencapai kesan gelongsor yang lengkap. Tetapi ada satu perkara yang perlu diperhatikan,

Seperti yang ditunjukkan dalam gambar di atas, acara stop() perlu ditambah untuk menghalang berbilang peristiwa yang dijana apabila tetikus bergerak pantas daripada membentuk tindanan, menyebabkan kesan tetikus masih menggelongsor atau berkelip selepas ia dialih keluar.

Pelaksanaan animasi kesan pensuisan gelongsor [kod contoh] di atas ialah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi rujukan kepada anda dan saya harap anda akan menyokong Script Home.