zoukankan      html  css  js  c++  java
  • jQuery(三) 动画操作一

     jq: 在线连接地址;<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

           1:     div  id="btn"  css={W:400px;H:400px; BGC:gray; DISPLAY:none;}

                    让 btn显示隐藏的动画一:   $("#btn").show(300);        // 300毫秒内 淡入

                                        动画二:   $("#btn").fadeIn();                      // 淡入

                                        动画三:   $("#btn").fadeOut();                   //  淡出

                                        动画四:   $("#btn").hide(300);                  // 淡出

                                        动画五:  slideDown();               // 向下滑动元素 

                                        动画六:  slideUp();               // 向上滑动元素 

                                        动画五: slideDown();               // 向左滑动元素 

                                        动画方法:animate() ;      // 根据自己的想法 完成要想的动作     animate(css{},time,callback);          

                    例:

                                     div  id="btn"  css={W:400px;H:400px; BGC:gray; }                                               // 定义一个div id为btn      

                                    var  btn = document.getElementById("btn");                                                          // 获取这个id为btn的div                

                                    $(function(){                                                                                                                // jq入口

                                            $("#btn").stop().animate(css{"marginLeft":"500"},3s);                                   // 定义动画 

                                  })

                                         

                                      

  • 相关阅读:
    eclipse插件开发:创建向导和导航器配置
    eclipse插件开发:属性视图
    标识出下列SQL语句的执行先后顺序
    webapi和webservice的本质区别
    某仪表上市公司.net-————Sql面试题
    Asp.net MVC 用EF来保存高精度小数时会碰到保留4位小数时,后两位默认为0的解决方法
    Asp.net MVC 集成AD域认证
    jquery zTree插件 json 数据详解
    模板列传值到子窗体中,子窗体中多选gridview中checkbox保存数据多项到数据库中
    asp.net comp雷达图
  • 原文地址:https://www.cnblogs.com/zxy-web/p/8718775.html
Copyright © 2011-2022 走看看