jQuery 效果
隐藏和显示
- hide（）
- show（）
语法
$(selector).hide(speed,callback);
$(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
实例
$("button").click(function(){
$("p").hide(1000);
});jQuery toggle()
使用toggle()的方法来切换hide()与show()方法
$("button").click(function(){
$("p").toggle();
});
淡入与淡出
jQuery Fading方法
- fadeIn() 淡入已隐藏的元素
- fadeOut() 淡出可见元素
- fadeToggle() 在以上两者切换
- fadeTo() 渐变为给定透明度
语法：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
//给定透明度在（0,1）之间滑动
方法
- slideDown() 向下滑动元素。
- slideUp() 向上滑动元素。
- slideToggle()
例子
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
动画
jQuery animate()方法允许您创建自定义的动画。
语法
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback参数是动画完成后所执行的函数名称。
html:
<button>开始动画button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
div>script:
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
//向右移动了250px像素多个属性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
height:'+=150px',width:'+=150px'也可以把动画的属性值设为show hide toggle
队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'});
div.animate({width:'300px',opacity:'0.8'});
div.animate({height:'100px',opacity:'0.4'});
div.animate({width:'100px',opacity:'0.8'});
}); $("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
停止动画
jQuery stop()方法用于在动画或效果完成前对它们进行停止。
语法:
$(selector).stop(stopAll,goToEnd);举例
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
jQuery Callback方法
Callback 函数在当前动画 100% 完成之后执行。
以下方法在隐藏效果完全实现后回调函数
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});以下无回调函数，在隐藏效果完成前弹出
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
jQuery Chaining
通过jQuery，把动作方法链接到一起
下面的例子把 css()、slideUp() 和slideDown() 链接在一起。”p1”元素首先会变为红色，然后向上滑动，再然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);