jQuery动画效果有哪些选项？

  • Z时代
  • 2024-01-10
  • 分类：综合

jQuery的动画实现可与方法如动画，来实现slideDown()，slideToggle()等等。这造成了使用jQuery HTML网页的动画效果。下表列出了一些创建不同效果的重要方法：

S.不
方法与说明
1。
animate（params，[duration，easing，callback]）
制作自定义动画的函数。
2。
fadeIn（speed，[callback]）
通过调整所有匹配元素的不透明度并在完成后触发可选回调来淡入淡出。
3。
fadeOut（speed，[callback]）
通过将所有匹配的元素的不透明度调整为0，然后将display设置为“ none”并在完成后触发可选的回调来淡出所有匹配的元素。
4。
fadeTo(speed,opacity,callback)
 将所有匹配元素的不透明度降低为指定的不透明度，并在完成后触发一个可选的回调。
5，
toggle()
切换显示匹配元素的每个集合。

这是slideToggle()方法的示例，该方法通过调整所有匹配元素的高度并在完成后触发可选回调来切换可见性。

这是此方法使用的所有参数的描述-

  • 速度 -代表三个预定义速度（“慢”，“正常”或“快”）之一或运行动画的毫秒数（例如1000）的字符串。

  • callback- 这是可选参数，表示动画完成后要调用的函数。

示例

您可以尝试运行以下代码，以了解如何使用slideToggle()方法来创建动画效果：

<html>
   <head>
      <title>The jQuery Example</title>
      <script src = "https://cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>
       
      <script>
   
         $(document).ready(function() {
            $("#toggle").click(function(){
               $(".target").slideToggle( 'slow', function(){
                  $(".log").text('Toggle Transition Complete');
               });
            });
               
         });
      </script>
       
      <style>
         p {
             background-color:#bca;
             width:200px;
             border:1px solid green;
         }
      </style>
   </head>
   
   <body>
      <p>Click on the following button:</p>
      <button id = "toggle"> Toggle </button>
      <div class = "target">
         <img src = "../images/jquery.jpg" alt = "jQuery" />
      </div>
       
      <div class = "log"></div>
 
   </body>
</html>

以上是 jQuery动画效果有哪些选项？ 的全部内容， 来源链接： utcz.com/z/352525.html

回到顶部