recherche

Maison  >  Article  >  interface Web  >  animer implémente un effet de commutation coulissant [exemple de code]_jquery

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

WBOY
WBOYoriginal
2016-05-16 15:01:501304parcourir

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>

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Code d'implémentation ichart.js pour dessiner des lignes pointillées et faire la moyenne des compétences d'effets de ligne pointillée_javascriptArticle suivant：Code d'implémentation ichart.js pour dessiner des lignes pointillées et faire la moyenne des compétences d'effets de ligne pointillée_javascript

Articles Liés

Voir plus