标签：jquery基础效果
jQuery基础效果$(document).ready(function(){}这句话的意思是页面加载完成后执行，
等同于js中的window.onload，大家学了jQuery的话应该就会知道
?
$(document).ready(function(){//这行代码意思是页面加载后执行
?????????? $("#bun1").click(function(){//#是ID的意思? .是Class的意思?? $("#bun1")选择你需要用到的元素，这句话的意思是我要给一个ID为bun1的元素加点击事件
?????????? $(".h11").hide(‘fast‘)//一样$(".h11")选择元素，选Class名为11的元素
??????? ?? })
?
解释完了，jQuery就是这么简单
现在来学习基础效果
?
?
1隐藏和显示
隐藏的代码是hide（speed，function）
第一个参数可以是 毫秒 slow fast?? 第二个参数，就是完成隐藏后执行的函数
显示的是代码show（speed，function）
第一个参数可以是 毫秒 slow fast?? 第二个参数，就是完成隐藏后执行的函数
?
如果你要弄隐藏和显示的效果，你需要2个按钮一个隐藏，一个显示，有个代码可以让你给一个按钮施加2个效果，既可以隐藏也可以显示，那就是
toggle(speed，function)
第一个参数可以是 毫秒 slow fast?? 第二个参数，就是完成隐藏后执行的函数
?
代码如下
$(document).ready(function(){
?????????? $(‘#bun1‘).click(function(){
???????????? //$(‘#div1‘).hide(2000)//隐藏 隐藏的速度是2秒完成
???????????? // $(‘#div1‘).show(2000)//显示 显示的速度为2秒完成
???????????? $(‘#div1‘).toggle(2000)//既可以隐藏也可以显示
?????????? })
??????????
??????? })
?
?
2淡入淡出
淡入隐藏的元素（把元素隐藏的给淡入出来，可以给人看到）
fadeIn(speed,function)
第一个参数可以是 毫秒 slow fast?? 第二个参数，就是完成隐藏后执行的函数
?
?
?
淡出显示的元素（把元素淡出，隐藏起来，我总是容易弄混）
fadeout(speed,function)
第一个参数可以是 毫秒 slow fast?? 第二个参数，就是完成隐藏后执行的函数
?
既可以淡入又可以淡出
fadeToggle(speed,function)
第一个参数可以是 毫秒 slow fast?? 第二个参数，就是完成隐藏后执行的函数
?
给淡入淡出的元素设置透明度
fadeTo(speed,opacity,function)
第一个参数可以是 毫秒 slow fast?? 第三个参数，就是完成隐藏后执行的函数 opacity是必须的参数（值为0-1之间）
?
代码如下
$(document).ready(function(){
?????????? $(‘#bun1‘).click(function(){
???????????? //$(‘#div1‘).fadeOut(2000)//淡出
???????????? //$(‘#div1‘).fadeIn(2000)//淡入
???????????? //$(‘#div1‘).fadeToggle(2000)既可以淡入又可以淡出
???????????? $(‘#div1‘).fadeTo(2000,0.2)
?????????? })
??????????
??????? })
?
?
3滑动
向下滑动
slideDown(speed,function)
第一个参数可以是 毫秒 slow fast?? 第二个参数，就是完成隐藏后执行的函数
?
向上滑动
slideUp(speed,function)
第一个参数可以是 毫秒 slow fast?? 第二个参数，就是完成隐藏后执行的函数
?
既能向上又能向下
slideToggle(speed,function)
第一个参数可以是 毫秒 slow fast?? 第二个参数，就是完成隐藏后执行的函数
?
代码如下
$(document).ready(function(){
?????????? $(‘#bun1‘).click(function(){
???????????? //$(‘#div1‘).slideDown(2000)//向下滑动隐藏到消失
???????????? //$(‘#div1‘).slideUp(2000)//向上滑动隐藏到消失
???????????? $(‘#div1‘).slideToggle(2000)//既可以向上又可以向下
?????????? })
??????????
??????? })
?
?
4动画
animate({params},speed,function)用于创建自定义动画
参数params必选 为形成动画的css属性
speed参数可以是 毫秒 slow? fast?? function参数，就是完成隐藏后执行的函数
$(document).ready(function(){
?????????? $(‘#bun1‘).click(function(){
$(‘#div1‘).animate({height:‘200px‘,width:‘200px‘},2000)
?????????? })
??????????
??????? })
?
?
Animate({})里面写多个css样式会同时执行
如果这样写，就会排队执行，先执行第一个，然后第二个，接着第三个，依次执行
$(‘#div1‘).animate({height:‘200px‘},2000)
$(‘#div1‘).animate({width:‘200px‘},2000)
?
?
还有一种写法是在原本的宽度上架200像素 使用+=，具体的其他用法，遇到才知道
$(‘#div1‘).animate({height:‘+=200px‘},2000)
?
?
?
?
stop(stopALL，goToEnd)用来停止动画
stopAll参数是否清除动画队列，默认是false，是停止当前动画，执行队列中的下一个动画
goToEnd参数是否立即完成当前动画，默认是false
?
因此stop（）不加参数的用法是清楚当前动画，执行队列中的下一个，具体用法，根据实际应用了
?
?
?
5 chaining技术的作用：能把动作/方法链接起来。
只需要再动画之后加.就可以链接起来
$(document).ready(function(){
?????????? $(‘#bun1‘).click(function(){
???????????? ? $(‘#div1‘).animate({height:‘+=200px‘},2000).css(‘background‘,‘yellow‘).animate({width:‘+=100px‘},2000)?????????? ?
??????????
?????????? })
??????????
??????? })
标签：jquery基础效果
原文地址：http://blog.51cto.com/xwxhvip/2049405
