animer implémente un effet de commutation coulissant [exemple de code]

animer implémente un effet de commutation coulissant [exemple de code]_jquery

WBOY

Libérer： 2016-05-16 15:01:50

original

1322 Les gens l'ont consulté

Aujourd'hui, j'aimerais partager avec vous un petit exemple d'utilisation de l'animation pour obtenir un effet de commutation glissante

Tout le monde sait que jQuery propose plusieurs méthodes pour obtenir l'effet de glissement :

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

Mais le glissement ci-dessus n'est pas pratique pour contrôler la direction du glissement, alors autant en écrire un nous-mêmes. . .

Le code est le suivant :

<!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>

Copier après la connexion

Le code ci-dessus peut obtenir un effet de glissement complet. Mais il y a une chose à noter,

Comme le montre l'image ci-dessus, un événement stop() doit être ajouté pour empêcher plusieurs événements générés lorsque la souris se déplace rapidement de former une pile, provoquant l'effet de la souris qui glisse toujours ou même clignote après son retrait.

L'implémentation animée ci-dessus de l'effet de commutation coulissante [exemple de code] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.