jQuery动画效果

更新日期: 2019-07-07阅读: 2.1k标签: 动画分享

复制链接

新浪微博

QQ 好友

扫一扫分享

jquery animate() 方法用于创建自定义动画。语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 css 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用;它把元素移动到左边，3秒时间到 left 属性等于 500 像素为止：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>  
       *{margin:0;padding:0;}
       #div2{width:100px;height:100px;background:orange;position:absolute;}
    </style>
    <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
             $("#bt1").click(function(){
                 $("#div2").animate({
                      left:'500px',
                      top:'150px',
                       opacity:'0.5',
                 },3000);
             });
           });
      </script>
</head>
<body>
     <button id="bt1">开始</button>
     <div id="div2">我是内容</div>
</body>
</html>

jQuery animate() - 使用队列功能，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>队列动画</title>
    <style>  
       *{margin:0;padding:0;}
       #div2{width:100px;height:100px;background:orange;position:absolute;}
    </style>
    <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
             $("#bt1").click(function(){
                var div=$('#div2');
                     div.animate({height:'300px',opacity:'0.4'});
                     div.animate({width:'300px',opacity:'0.8'});
                     div.animate({height:'100px',opacity:'0.4'});
                     div.animate({width:'100px',opacity:'0.8'});
             })       
           });
      </script>
</head>
<body>
     <button id="bt1">开始</button>
     <div id="div2">我是内容</div>
</body>
</html>

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>停止动画</title>
    <style>
          
       *{margin:0;padding:0;}
         #div2{width:100px;height:100px;background:orange;position:absolute;}
    </style>
    <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
             $("#bt1").click(function(){
                 $("#div2").animate({
                      left:'500px',
                      top:'150px',
                      opacity:'0.5',
                 },3000);
             });
             $("#bt2").click(function(){
                  $("#div2").stop();
             })
           });
      </script>
</head>
<body>
     <button id="bt1">开始</button><button id="bt2">停止</button>
     <div id="div2">我是内容</div>
</body>
</html>

更多时候jQuery的动画会涉及函数，也就是会使用一个参数的作用，这也是jQuery动画受青睐的一个原因。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
          
       *{margin:0;padding:0;}
         #div2{width:100px;height:100px;background:orange;position:absolute;}
    </style>
    <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
             $("#bt1").click(function(){
                   $("#div2").hide(1000,function(){
                       alert("内容被隐藏了");
                   })
             }) 
           });
      </script>
</head>
<body>
     <button id="bt1">点击</button>
     <div id="div2">我是内容</div>
</body>
</html>

链接: https://fly63.com/article/detial/4545

jQuery动画效果

纯CSS3实现各种表情动画

Vue.js动画笔记_vue实现动画效果

新手引导动画的4种实现方式

为何 Canvas 内元素动画总是在颤抖？

前端开发常用css动画代码

css环形滚动_内容加载的环形滚动动画效果

css transition 实现滑入滑出

动画函数的绘制及自定义动画函数

超酷的CSS3 loading预加载动画特效

Vue 动画的封装