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);                                   // 定义动画 

                              })

                                     

                                  

posted @ 2018-04-04 18:43  大大怪将军010  阅读(122)  评论(0)    收藏  举报