目录
一、jQuery可以使用css方法来修改元素样式
二、设置类的样式方法
1.添加类
2.移除类
3.切换类
三、类操作与className区别
四、显示隐藏效果
1、显示语法
2、隐藏语法
3、切换语法
五、滑动效果
1、上滑效果语法
2、下滑效果语法
3、滑动切换效果语法
4、事件切换
六、动画队列及其停止排队方法
1、动画或效果队列
2、停止排队
七、淡入淡出效果
1、淡入效果语法
2、淡出效果语法
3、淡入淡出切换效果语法
4、渐进方式调整到指定的不透明度
八、自定义动画animate
一、jQuery可以使用css方法来修改元素样式
jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。
1.参数只写属性名，则是返回属性值
$(this).css("color"");⒉.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加号，值如果是数字可以不用
跟单位和引号
$(this).css("color", "red");示例：
<body>
<div>123</div>
<script>
$(function(){
$("div").css("color","red");
});
</script>
</body>3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，
$(this).css({ "color":" white","font-size":"20px"});示例：
<body>
<div></div>
<script>
$(function(){
$("div").css({
width:200,
height:200,
backgroundColor:"red"
});
});
</script>
</body>二、设置类的样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
1.添加类
$("div").addClass("current");2.移除类
$("div").removeClass("current");3.切换类
$("div").toggleClass("current");示例：
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 100px auto;
transition: all 0.5s;
}
.current{
background-color: red;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="current"></div>
<script>
//添加类addClass()
/* $(function(){
$("div").click(function(){
$(this).addClass("current");
});
}) */
//删除类removeClass()
/* $("div").click(function(){
$(this).removeClass("current");
}); */
//切换类 toggleClass()
$("div").click(function(){
$(this).toggleClass("current");
});
</script>
</body>三、类操作与className区别
原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先的类名。
<body>
<div class="one"></div>
<script>
//追加类名，覆盖原来的类名
var one = document.querySelector(".one");
one.className = "two";
//addClass相当于追加类名，不影响以前的类名
$(".one").addClass("two");
//移除two这个类名
//$(".one").removeClass("two");
</script>
</body>四、显示隐藏效果
1、显示语法
show ([speed,[easing],[fn]])显示参数
（1）参数都可以省略，无动画直接显示。
( 2 ) speed :三种预定速度之一的字符串(“slow”,"norma",or“fast”)或表示动画时长的毫秒数值
(如:1000)。
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
2、隐藏语法
hide([speed,[easing],[fn]])3、切换语法
toggle([speed,[easing],[fn]])示例：
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function(){
$("button").eq(0).click(function(){
$("div").show(1000,function(){
alert(1);
});
});
$("button").eq(1).click(function(){
$("div").hide(1000,function(){
alert(1);
});
});
//一般情况不加参数，直接显示隐藏
$("button").eq(2).click(function(){
$("div").toggle(1000);
});
})
</script>
</body>五、滑动效果
1、上滑效果语法
slideUp ([speed,[easing],[fn]])2、下滑效果语法
slideDown([speed,[easing],[fn]])3、滑动切换效果语法
slideToggle ([speed,[easing],[fn]])示例：
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
display: none;
}
</style>
</head>
<body>
<button>下滑</button>
<button>上滑</button>
<button>滑动切换</button>
<div></div>
<script>
$(function(){
//下滑slideDown()
$("button").eq(0).hover(function(){
$("div").slideDown();
})
//上滑slideUp()
$("button").eq(1).hover(function(){
$("div").slideUp();
})
//滑动切换slideToggle()
$("button").eq(2).hover(function(){
$("div").slideToggle();
})
})
</script>
</body>4、事件切换
hover([over,]out)( 1 ) over:鼠标移到元素上要触发的函数(相当于mouseenter )
( 2 ) out:鼠标移出元素要触发的函数（相当于mouseleave )
六、动画队列及其停止排队方法
1、动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2、停止排队
stop()(1 ) stop()方法用于停止动画或效果。
(2)注意:stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
<script>
$(function(){
//下滑slideDown()
$("button").eq(0).hover(function(){
$("div").stop().slideDown();
})
//上滑slideUp()
$("button").eq(1).hover(function(){
$("div").stop().slideUp();
})
//滑动切换slideToggle()
$("button").eq(2).hover(function(){
$("div").stop().slideToggle();
});
});
</script>七、淡入淡出效果
1、淡入效果语法
fadeIn([speed,[easing],[fn]])淡入效果参数
(1)参数都可以省略。
( 2 ) speed :三种预定速度之一的字符串(“slow”,“normal”,or"fast”)或表示动画时长的毫秒数值(如
∶1000)。
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。.
( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
2、淡出效果语法
fadeout([speed,[easing],[fn]])3、淡入淡出切换效果语法
fadeToggle([speed, [easing],[fn]])4、渐进方式调整到指定的不透明度
fadeTo ([[speed],opacity,[easing],[fn]])2.效果参数
( 1 ) opacity透明度必须写，取值0~1之间。
( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal" ,or“fast”)或表示动画时长的毫秒数值(如∶1000)。必须写
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
示例：
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
display: none;
}
</style>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出</button>
<button>修改不透明度</button>
<div></div>
<script>
$(function(){
$("button").eq(0).click(function(){
$("div").fadeIn(1000);
})
$("button").eq(1).click(function(){
$("div").fadeOut(1000);
})
$("button").eq(2).click(function(){
$("div").fadeToggle(1000);
})
//透明度必须要写
$("button").eq(3).click(function(){
$("div").fadeTo(1000,0.5);
});
});
</script>
</body>八、自定义动画animate
语法：
animate(params, [speed],[easing],[fn])参数
( 1 ) params:想要更改的样式属性，要以对象的形式传递，必须写。属性名可以不用带引号，如果
是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值(如
∶1000)。
( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
示例：
<style>
div{
//盒子定位
position: absolute;
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<button>动起来</button>
<div></div>
<script>
$(function(){
$("button").click(function(){
$("div").animate({
left: 300,
top: 200,
opacity: 0.4,
width: 200,
height: 200
},500);
});
});
</script>
</body>