jQuery-Day01 常用API-2

添加类操作

	<div></div>
 	<script>
        $(function(){
        	//添加current类
        	$("div").addClass("current");
        	//删除div中的current类
        	$("div").removeClass("current");
        	//切换，有则删，无则添
        	$("div").toggleClass("current");
        })
    </script>

类操作和直接修改className的区别

1. 原生js中的className会覆盖元素原先的类名；
2. jQuery里面的类操作，只针对指定类名，不会一概而论。

效果

第一类 显示隐藏

show([speed],[easing],[fn]) 
hide([speed],[easing],[fn]) 
toggle([speed],[easing],[fn]) 

第二类 滑动

1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])

	<script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").slideDown();
            });
            $("button").eq(1).click(function(){
                $("div").slideUp();
            });
            $("button").eq(2).click(function(){
                $("div").slideToggle();                
            });
        })
    </script>

第三类 淡入淡出

1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])
4. fadeTo([[speed],opacity,[easing],[fn]])

	<script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").fadeIn();
            });
            $("button").eq(1).click(function(){
                $("div").fadeOut();
            });
            $("button").eq(2).click(function(){
                $("div").fadeToggle();          
            });
            $("button").eq(3).click(function(){
                $("div").fadeTo(1000,0.3);           
            });
        })
    </script>

1. 参数可省略；
2. speed的值可为slow，normal，far或者毫秒数；
3. easing：(Optional)用来指定切换效果（swing(默认)，linear）；
4. fn：等动画完成后执行的函数；
5. opacity:一个0至1之间表示透明度的数字。

自定义动画（animate）

animate(params,[speed],[easing],[fn])

	<script>
        $(function(){
            $("button").click(function(){
                $("div").animate({
                    left:200,
                    top:400,
                    opacity:0.5
                })
            })
        })
    </script>

params:想要改变的样式属性，以对象的形式传递，属性名可不带引号，复合属性采用驼峰命名方法。