Maison > Article > interface Web > notes d'étude sur l'effet d'animation jquery (8 effets)_jquery

notes d'étude sur l'effet d'animation jquery (8 effets)_jquery

WBOYoriginal: 2016-05-16 15:32:371178parcourir

1. Afficher et masquer des éléments

afficher : aucun ; masquer
affichage:bloc;affichage

Méthodes faciles à afficher et à masquer

a) show() show
b) cacher() cacher
c) commutateur toggle(), afficher pour masquer, masquer pour afficher

<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 prend en charge deux méthodes d'affichage et de masquage d'éléments, à savoir l'utilisation de la visibilité ou des styles d'affichage. Elles ont le même effet lors du contrôle de l'affichage et du masquage des éléments, mais les résultats sont différents.
Les instructions spécifiques sont les suivantes :

Lors du masquage d'un élément, l'attribut de visibilité enregistrera également l'influence de l'élément dans le flux de documents, et l'inconnu de l'élément restera inchangé après le masquage. Cet attribut comprend deux valeurs : visible (par défaut) et masqué.
Une fois l'affichage masqué, les éléments masqués n'occupent plus la position du document.

2. Afficher et masquer l'effet de glissement

slideUp(speed[,callback]) fait glisser l'élément vers le haut et finit par le masquer
slideDown(speed[,callback]) fait glisser l'élément vers le bas et affiche enfin
slideToggle(vitesse[,callback])

Vitesse : Réglez la vitesse de l'effet (lent (600) normal (400) rapide (200) temps (millisecondes))
Callback : fonction de rappel automatiquement appelée après l'exécution de l'effet

<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. Effet de fondu

Autoriser les éléments à s'afficher et à se masquer grâce à certains changements de transparence

fadeIn (vitesse, [rappel])
fadeOut (vitesse, [rappel])
effet de commutateur fadeToggle (vitesse, [rappel])
fadeTo(speed, opacity, [callback]) définit le div sur une certaine transparence (0-1) 0,3 correspond à 30 % de transparence

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

Définissez la transparence, la transparence de div est de 30 % :

4. La méthode sous-jacente de l'effet d'animation animate()

show() hide() et d'autres effets d'animation exécutent en interne la méthode animate()

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

Les méthodes jquery générales telles que css() renverront l'objet jquery actuel après l'exécution, donc de nombreuses méthodes jquery peuvent être appelées dans une chaîne.

 <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. Animation d'accumulation et de soustraction

Si l'animation est réglée à gauche : 500 à la fois, le premier clic sur le div se déplacera de 500 pixels vers la gauche, et le deuxième clic ne bougera pas. L'accumulation, l'accumulation et la soustraction sont des mouvements continus. Changez simplement de gauche : "500px" à gauche : " =500px" ou à gauche : "-=500px".

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

6. Animations multiples

1. Exécutez plusieurs animations en même temps
L'exemple ci-dessus contrôle uniquement le changement de l'attribut gauche Cette fois, lorsque nous contrôlons l'attribut gauche, nous contrôlons également la hauteur de l'élément à 200px

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

2. Exécuter les animations de manière séquentielle

Dans l'exemple ci-dessus, les deux animations de déplacement de l'élément vers la droite et d'agrandissement de la hauteur sont réalisées simultanément. Maintenant, nous devons d'abord nous déplacer vers la droite, puis agrandir la hauteur. C'est très simple. Il suffit de diviser la méthode animate() ci-dessus et de l'écrire en deux

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

3. Animation complète

Des animations plus complexes sont ensuite réalisées. Cliquez sur l'élément div pour le déplacer vers la droite tout en augmentant sa hauteur et en faisant passer son opacité de 50 % à 100 %. Laissez-le ensuite se déplacer de haut en bas pendant que sa largeur s'agrandit. Une fois cette opération terminée
. Après quelques effets, il sera masqué par un fondu.

$(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. Fonction de rappel d'animation

Dans l'exemple ci-dessus, si vous souhaitez changer de style CSS au lieu de masquer l'élément lors de la dernière étape. Nous pouvons maintenant utiliser la fonction de rappel du troisième paramètre d'animate

$(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")}); 

  }) 
})

Cela ajoute la méthode CSS à la file d'attente d'animation.

8. Arrêtez l'animation et déterminez si elle est en état d'animation

1. Arrêtez l'animation de l'élément

stop([clearQueue][,gotoEnd]) Les deux sont des paramètres facultatifs, tous deux de type booléen
Description du paramètre :

clearQueue : représente s'il faut effacer la file d'attente d'animation inachevée
gotoEnd : représente s'il faut passer à l'état final de l'animation en cours d'exécution
Vous pouvez comprendre ces deux paramètres de la méthode stop() à travers un exemple complet :

<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. Déterminez si l'élément est dans un état animé

Lors de l'utilisation de la méthode animate(), évitez les incohérences entre l'animation et le comportement de l'utilisateur causées par l'accumulation d'animations. L'accumulation d'animation se produit lorsque l'utilisateur effectue rapidement une animation animate() sur un élément.

La solution consiste à déterminer si l'élément est dans l'état d'animation et à ajouter une nouvelle animation à l'élément uniquement lorsqu'il n'est pas dans l'état d'animation.
Utilisation :

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

Grâce à l'analyse détaillée de cet article sur 8 effets d'animation jquery, vous pouvez jouer avec les effets d'animation jquery. J'espère que vous aimerez cet article qui fournit une introduction complète aux effets d'animation jquery.

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：Un résumé quotidien de l'apprentissage javascript (objet booléen)_compétences javascriptArticle suivant：Un résumé quotidien de l'apprentissage javascript (objet booléen)_compétences javascript

Articles Liés

Voir plus