一 切换
1.基本
show()展示,hide()隐藏,toggle()切换
show()展示,hide()隐藏,toggle()切换
btn.click(function () { btn1.toggle( "slow",function () { 这个效果完成后 执行后面的fun函数 div.css({ background:"red" }) }); })
2.滑动效果
slideDown 显示 slideUp 隐藏 slideToggle 来回滑动切换
slideDown 显示 slideUp 隐藏 slideToggle 来回滑动切换
btn.click(function () {
div.slideToggle(); 显示效果
})
3.淡入淡出
fadeIn(出来) fadeOut(隐藏) fadeToggle(来回变化) fadeTo(1000,0.4) 花 1秒变成0.4透明度
$(".btn1").click(function(){
$("p").fadeTo(1000,0.4);
});
1秒之后执行后面的函数
$(".btn1").click(function(){$("p").fadeOut(1000,function(){
$(".btn1").css("color","red")
});
eg:案例展示：点击菜单 显示或者隐藏下面的内容，
主要用到函数
div.slideToggle() 然后设置一个开关，动态调整箭头的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ 440px;height: 200px;}
input{ 100px;height: 300px;background-color: red}
ul{
background-color: red
}
</style>
</head>
<body>
<ul><strong>九江长虹妇产医院</strong> <span>V</span>
<li>a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
<li>a5</li>
<li>a6</li>
<li>a7</li>
<li>a8</li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var li =$("li");
var strong =$("strong");
var btn1 =$("#btn1");
var onoff=true;
strong.click(function () {
li.slideToggle(500);
if (onoff) {
$("span").text("V");
onoff=false;
} else{
$("span").text("^");
onoff=true;
}
})
// btn1.click(function () {
// div.slideDown();
// })
</script>
</body>
</html>
二 animate 动画
1. 同时执行
$.animate({top:200,left:50},5000,function(){})
动画改变的内容 时间 动画结束的函数
2. 顺序执行
$("li").animate({ top:0, left:300},1000)
$("li").animate({ top:300, left:300},1000)
等同于：
$("li").on("click",function () {
$("li").animate({ top:0, left:300},1000,function () {
$("li").animate({ top:300, left:300},1000)
}) 注意 left:"+=30" 可以做累加动画
3.延迟动画
$("li").delay(2000).animate({ top:0, left:"+=300"},100)
4.停止动画
$("li").stop();
strong.click(function test() {
ul.animate({
top:200,
left:200,
ul:ul.css({ backgroundColor:"orange"})
},5000,function () {
ul.animate({
top:0,
left:0,
ul:ul.css({ backgroundColor:"red"}) 注意这个地方改变背景颜色 用这种方式 也是奇怪
// backgroundColor:"red"
},5000,function () {
test()
}) })
})