|
|
|
示例 2 : 向上滑动 向下滑动 滑动切换 示例 3 : 淡入 淡出 淡入淡出切换 指定淡入程度 示例 4 : 自定义动画效果 示例 5 : 回调函数
显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000) <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.hide();
});
$("#b2").click(function(){
div.show();
});
$("#b3").click(function(){
div.toggle();
});
$("#b4").click(function(){
div.show(1000);
});
$("#b5").click(function(){
div.hide(1000);
});
$("#b6").click(function(){
div.toggle(1000);
});
});
</script>
<style>
button{
display:block;
}
div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}
</style>
<button id="b1">立即隐藏</button>
<button id="b2">立即显示</button>
<button id="b3">立即切换</button>
<button id="b4">延时显示</button>
<button id="b5">延时隐藏</button>
<button id="b6">延时切换</button>
<br>
<br>
<div id="d">
用于演示效果的DIV
</div>
向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数，表示延时操作，比如slideUp(2000) <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.slideUp();
});
$("#b2").click(function(){
div.slideDown();
});
$("#b3").click(function(){
div.slideToggle();
});
$("#b4").click(function(){
div.slideUp(2000);
});
$("#b5").click(function(){
div.slideDown(2000);
});
$("#b6").click(function(){
div.slideToggle(2000);
});
});
</script>
<style>
button{
display:block;
}
div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}
</style>
<button id="b1">向上滑动</button>
<button id="b2">向下滑动</button>
<button id="b3">滑动切换</button>
<button id="b4">延时向上滑动</button>
<button id="b5">延时向下滑动</button>
<button id="b6">延时滑动切换</button>
<br>
<br>
<div id="d">
用于演示效果的DIV
</div>
淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000) fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入 <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.fadeIn();
});
$("#b2").click(function(){
div.fadeOut();
});
$("#b3").click(function(){
div.fadeToggle();
});
$("#b4").click(function(){
div.fadeIn(2000);
});
$("#b5").click(function(){
div.fadeOut(2000);
});
$("#b6").click(function(){
div.fadeToggle(2000);
});
$("#b7").click(function(){
$("#d1").fadeTo("slow",0.2);
$("#d2").fadeTo("slow",0.5);
$("#d3").fadeTo("slow",0.8);
});
});
</script>
<style>
button{
display:block;
}
table div{
border:solid px gray;
background-color:pink;
width:80px;
height:50px;
}
div{
border:solid 1px gray;
background-color:pink;
width:300px;
height:100px;
}
</style>
<button id="b2">淡出</button>
<button id="b1">淡入</button>
<button id="b3">淡入淡出切换</button>
<button id="b5">延时淡出</button>
<button id="b4">延时淡入</button>
<button id="b6">延时淡入淡出切换</button>
<button id="b7">fadeTo</button>
<br>
<br>
<div id="d">
用于演示效果的DIV
</div>
<table>
<tr>
<td>
<div id="d1">
用于演示fadeTo 20%
</div>
</td>
<td>
<div id="d2">
用于演示fadeTo 50%
</div>
</td>
<td>
<div id="d3">
用于演示fadeTo 80%
</div>
</td>
</tr>
</table>
通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式 animate()第二个参数为延时毫秒 注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。 <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000);
});
});
</script>
<style>
button{
display:block;
}
div{
background-color:pink;
width:200px;
height:80px;
font-size:12px;
position:relative;
}
</style>
<button id="b1">自定义动画</button>
<br>
<br>
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>
效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。 只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。 <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
var div = $("#d");
$("#b1").click(function(){
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
alert("动画演示结束");
});
});
});
</script>
<style>
button{
display:block;
}
div{
background-color:pink;
width:200px;
height:80px;
font-size:12px;
position:relative;
}
</style>
<button id="b1">自定义动画结束时，会有提示框</button>
<br>
<br>
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
