标签：实现 法则 ack utf-8 fun 写法 速度 特效 一点
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery 学习3</title> <script src="../js/jquery-1.12.2.min.js"></script> </head> <body> <button id="b">点击我切换div</button> <div>我会被改变</div> <!--这里我们用class，演示一次jQuery里的class写法--> <p class="p2">点击我，就会隐藏我</p> <button id="r">点击我，出现淡入效果</button> <button id="u">点击我，淡出效果</button> <!--给这个p元素设置css样式，让它先默认隐藏--> <p id="ru" style="width: 100px;height: 100px;display: none"></p> <br/><br/> <button id="h1">点击我，出现滑入效果</button> <button id="h2">点击我，滑出效果</button> <!--给这个p元素设置css样式，让它先默认隐藏--> <p id="hua" style="width: 100px;height: 100px;display: none"></p> <br/><br/> <button id="kai">开始动画</button> <p id="dong" style="width: 100px;height: 100px;position: relative;"></p> <br/><br/> <button id="sh">停止动画</button> <script> //我们点击button，运行下面的代码 $("#b").click(function(){ //toggle()方法是用来切换show()和hide()的，如果是隐藏则显示，是显示则隐藏 $("div").toggle(); }); //我们点击class为p2的元素 $(".p2").click(function(){ //hide()方法是可以带参数的，有两个参数 //第一个参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 //第二个参数是隐藏或显示完成后所执行的函数名称 $(this).hide(1000,dd()); //调用dd()函数，然后1000是毫秒，则是1秒时间，隐藏该元素 }); function dd(){ //被上面的函数调用，运行以下的代码 alert(‘我被调用了‘); } //点击id为r的button元素，使id为ru的p元素出现淡入效果 $("#r").click(function(){ //fadeIn()方法则是淡入效果，后面跟了一个参数3000是毫秒，就是3秒以内慢慢出现 $("#ru").fadeIn(3000); }); //点击id为u的button元素，使id为ru的p元素出现淡出效果 $("#u").click(function(){ //fadeOut()方法则是淡出效果，后面跟了一个参数2000是毫秒，就是2秒以内慢慢出现 $("#ru").fadeOut(2000); }); //点击id为u的button元素，使id为ru的p元素出现淡出效果 $("#h1").click(function(){ //slideDown()方法则是滑出效果，后面跟了一个参数3000是毫秒，就是3秒以内慢慢出现 $("#hua").slideDown(3000); }); //点击id为u的button元素，使id为ru的p元素出现淡出效果 $("#h2").click(function(){ //slideUp()方法则是滑入效果，后面跟了一个参数2000是毫秒，就是2秒以内慢慢出现 $("#hua").slideUp(2000); }); //animate()动画效果，这个就比较难一点 //默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。 //如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。 $("#kai").click(function(){ $("#dong").animate({ left:‘250px‘, height:‘150px‘, width:‘150px‘ },5000,dd()); //animate()里面有三个参数，第一个是css样式 //第二个和第三个同上面的一样，一个是时间控制，一个是调用函数 }); //stop()停止方法，可以停止以上效果，我们测试一个 $("#sh").click(function(){ $("#dong").stop(); //就这样，就可以停止id为dong的这个元素了 }); </script> </body> </html>
标签：实现 法则 ack utf-8 fun 写法 速度 特效 一点
原文地址：http://www.cnblogs.com/longfeng995/p/7590458.html
