JQuery 隐藏/显示
JQuery 淡入/淡出
JQuery 滑动
以上这三个用法类似,整合到一篇里面,提前说下共同参数,speed为速度,callback为回调函数,还不懂的可自行测试。
JQuery 隐藏/显示
$(selector).show(speed,callback);
$(selector).hide(speed,callback);
$(selector).toggle(speed,callback);
show 为显示
hide为隐藏
toggle为隐藏或显示(由标签现在的状态决定)
JQuery 淡入/淡出
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
fadeIn为淡入
fadeOut为淡出
fadeToggle为淡入或淡出(由标签现在的状态决定)
JQuery 滑动
$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideToggle(speed,callback);
slideUp为向上滑动
slideDown为向下滑动
slideToggle向上或向下滑动(由标签现在的状态决定)
JQuery动画
<!--必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。-->
<!--可选的 callback 参数是动画完成后所执行的函数名称。-->
$(selector).animate({params},speed,callback);
使用
$("div").animate({
left: '250px',
opacity: '0.5',
// 使用绝对位置
// height: '150px',
// width: '150px'
// 使用相对位置
// height: '+=150px',
// width: '+=150px'
// 预定义的值: "show"、"hide" 或 "toggle":
height: 'toggle'
});
// 队列功能
// div.animate({
// height: '300px',
// opacity: '0.4'
// }, "slow");
// div.animate({
// width: '300px',
// opacity: '0.8'
// }, "slow");
// div.animate({
// height: '100px',
// opacity: '0.4'
// }, "slow");
// div.animate({
// width: '100px',
// opacity: '0.8'
// }, "slow");
chaining,一句中允许多个JQuery方法
$("#p1").css("color","red").slideUp(2000).slideDown(2000);