前言
jQuery 给我们封装了很多动画效果,其中最为常见的就是显示隐藏、滑动、淡入淡出和自定义动画。下面来看一下这些效果的使用方法。
一、jQuery隐藏显示
可以使用hide() 和show() 方法来隐藏和显示HTML元素。
//隐藏元素
$("#hide").click(function(){
$("p").hide();
});
//显示元素
$("#show").click(function(){
$("p").show();
});
也可以使用toggle() 方法来切换hide()和show()方法。
$("button").click(function(){
$("p").toggle();
});
二、jQuery淡入淡出
fadeIn() 用于淡入已隐藏的元素
fadeOut() 用于淡出已隐藏的元素
$("button").click(function(){
//淡入元素
$("#div1").fadeIn();
//可以添加参数
$("#div2").fadeIn("slow");
//淡出元素
$("#div3").fadeOut(3000);
});
fadeToggle() 方法可以在fadeIn()与fadeOut()方法之间进行切换。
$("button").click(function(){
$("#div2").fadeToggle("fast");
});
fadeTo() 方法允许渐变为给定的不透明度(值介于0与1之间)。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
});
三、jQuery滑动
slideDown() 方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。
$("#flip").click(function(){
$("#div1").slideDown();
$("#div1").slideUp();
});
slideToggle() 方法slideDown()与slideUp()方法之间进行切换。
$("#flip").click(function(){
$("#panel").slideToggle();
});
四、jQuery自定义动画
animate() 方法用于创建自定义动画。可选的speed参数规定效果的时长。
它可以取以下值:“slow”、"fast"或毫秒。可选的callback参数是动画完成后所执行的函数名称。
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
五、stop方法
jQuerystop() 方法用于停止动画或效果,在它们完成之前,适用于所有jQuery效果函数,包括滑动、淡入淡出和自定义动画。
$("#stop").click(function(){
$("#panel").stop();
});
六、回调函数
在当前动画100%完成之后执行。
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
总结
以上就是今天要讲的内容。