jQuery 学习3
这节课主要是学习jQuery的动态效果。
show()和hide()显示与隐藏方法，toggle()方法，fadeIn()谈入，fadeOut()谈出，slideDown()滑出，slideUp()滑入，animate()动画效果，stop()停止动画
w3c教程手册里有很好的解释，但很多同学依旧看不懂，行吧，那这里我们演示代码，看看效果，简单的学学这个东西：
<!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>同学可以对着代码，测试功能。这些方法，都是可带参数的，除了stop()停止方法和animate()动画方法，其他的都可以带两个参数，第一个参数是时间控制，第二个参数是调用函数！animate()动画效果，它有三个参数，第二个是时间控制，第三个是调用函数，第一个则是多出的，css样式控制，改变效果。
这里要注意animate()动画方法，因为静态页面都是没办法移动的，要使用antmate()动画方法，就要给它一个postion定位，这样的话，就可以实现位移，做出动态特效。
stop()停止方法也是有两个参数，这个同学去w3c教程手册里去看看咯！
以上实战项目中，大多数可能遇到的并不多，但是遇到了，就可以做出这种动态效果，好看又好用，要考虑用户体验，总之显示隐藏太低调了，偶尔尝尝新花样！这些就比如可以用到二级菜单导航栏里。
希望我的教程能帮助到大家。
第二十一篇 jQuery 学习3 特效效果
原文地址：http://www.cnblogs.com/longfeng995/p/7590458.html