Maison  >  Article  >  interface Web  >  jQuery implémente des événements de clic pour les effets de mouvement et de dégradé_jquery

jQuery implémente des événements de clic pour les effets de mouvement et de dégradé_jquery

WBOY
WBOYoriginal
2016-05-16 16:12:501207parcourir

Regardez d'abord le code :

Copier le code Le code est le suivant :



   
       
       
       
   

   
       
       

        <script> <br>             $(document).ready(function(){<br>               $("button").click(function(){<br>                 var div=$(".box");<br>                 div.animate({height:'200px',opacity:'0.4'},"slow");<br>                 div.animate({width:'200px',opacity:'0.8'},"slow");<br>                 div.animate({height:'100px',opacity:'0.4'},"slow");<br>                 div.animate({width:'100px',opacity:'0.8'},"slow");<br>                 div.animate({right:'100px',opacity:'0.8'},"slow");<br>                 div.animate({bottom:'100px',opacity:'0.8'},"slow");<br>                 div.animate({left:'100px',opacity:'0.8'},"slow");<br>                 div.animate({top:'100px',opacity:'0.8'},"slow");<br>               });<br>             });<br>         </script>
        <script><br>             $(document).ready(function(){<br>                 $("button").click(function(){<br>                     var div=$(".box");<br>                         div.animate({height:'300px',opacity:'0.4'},"slow");<br>                         div.animate({width:'300px',opacity:'0.8'},"slow");<br>                         div.animate({height:'100px',opacity:'0.4'},"slow");<br>                         div.animate({width:'100px',opacity:'0.8'},"slow");<br>                     });<br>                 });<br>             });<br>         </script>
   

.animate  事件,是这个 里面的新的东西.解释起来就是  使div 块儿  变得有灵魂 可以移动.

 Tipps:

1、Klicken Sie auf 事件的  点击节点的选择

2、通过 var div=$(".box")  来选择需要控制的 css 属性

剩下的就要靠 自己去敲代码,看效果 去理解其中的 意思.

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