|
//1.显示与隐藏
//其实就是修改元素的高度和低度
//显示匹配的元素：show([speed,[easing],[fn]])
//speed：可传参数slow(0.6秒),normal(0.4秒),fast(0.2秒)，或者直接一个毫秒值
//easing:用来指定切换效果，默认是swing，可用参数linear
//fn:在动画完成时执行的函数，每个元素执行一次。
$("#div1").show();//直接显示
$("#div1").show("slow");//缓慢动画显示
$("div").show(1000);//以毫秒数来显示动画
$("div").show(1000,function(){alert(‘aa‘)});//显示完成后弹框
//隐藏匹配的元素：hide([speed,[easing],[fn]])
$("#div1").hide();
//2.滑动
//slideDown()和slideUp()
//向下显示：slideDown([speed],[easing],[fn])
//向上显示：slideUp([speed,[easing],[fn]])
//speed：可传参数slow(0.6秒),normal(0.4秒),fast(0.2秒)，或者直接一个毫秒值
//easing:用来指定切换效果，默认是swing，可用参数linear
//fn:在动画完成时执行的函数，每个元素执行一次。
<input type="button" class="btn2" value="滑动出来"/>
<input type="button" class="btn3" value="隐藏回去"/>
<div style="display:none">
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
测试<br>
</div>
$(function(){
$(".btn2").click(function(){
$("div").slideDown();
});
$(".btn3").click(function(){
$("div").slideUp();
});
});
//自动判断元素高低来决定向上或者向下滑动：slideToggle()参数同slideDown,slideUp
//单击动画按钮，如果是显示的则隐藏，如果是隐藏的则自动显示
<input type="button" class="divFrame" value="动画"/>
<div>
<img src="a.jpg" />
</div>
$(".divFrame").click(function(){
$("img").slideToggle(3000,function(){
$("img").css({
border: ‘solid 1px #ccc‘
});
})
});
//3.淡入淡出：fadeln()和fadeOut()
//淡入和淡出也是改变元素的显示，跟show类型
//只不过show是改变元素高低，fade是改变元素的透明度
//使图片淡入或者淡出
<input type="button" class="in" value="淡入"/>
<input type="button" class="out" value="淡出"/>
<div>
<img src="a.jpg" style="display:none"/>
</div>
//jQuery
$(".in").click(function(){
$("img").fadeIn("slow", function() {
alert("淡入成功");
});
});
$(".out").click(function(){
$("img").fadeOut("slow", function() {
alert("淡出成功");
});
});
//可自定义透明度
//fadeTo([[speed],opacity,[easing],[fn]])
//其中多的一个参数opacity为透明度的值，比如0.7
$("img").fadeTo("slow",0.7);
//4.自定义动画animate()
//animate(params,[speed],[easing],[fn])
//params:一组包含作为动画属性和终值的样式属性和及其值的集合
//speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
//easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
//fn:在动画完成时执行的函数，每个元素执行一次。
//单击变大按钮，将div变大
<button id="go">变大</button>
<div id="block">Hello!</div>
//jQuery
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%", //同样这里也可以使用left和right让元素左右移动
fontSize: "10em"
}, 1000 );
});
|
