JQuery（学习笔记二）JQuery常用效果

一、隐藏/显示

（1）使用hide/show

//speed是时间，callback是回调方法 $(selector).hide(speed,callback); $(selector).show(speed,callback);

例子：

$("button").click(function(){     $("p").hide(1000); });

（2）使用toggle

$(selector).toggle(1000,function(){    //todo: });

二、淡入淡出

//淡入 $(selector).fadeIn(speed,callback); //淡出 $(selector).fadeOut(speed,callback); //淡入淡出 $(selector).fadeToggle(speed,callback); // opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间） $(selector).fadeTo(speed,opacity,callback);

三、滑动方法

//向下滑动元素 $(selector).slideDown(speed,callback); //向上滑动元素 $(selector).slideUp(speed,callback); //向下滑动元素/向上滑动元素 $(selector).slideToggle(speed,callback);

四、动画

$(selector).animate({params},speed,callback); //例子，把 元素往右边移动了 250 像素 $("button").click(function(){     $("div").animate({left:'250px'}); });   //操作多个属性 $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });   //操作多个标签 $("button").click(function(){ var div=$("div"); 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"); });

五、停止动画

//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 //可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 //默认stop() 会清除在被选元素上指定的当前动画 $(selector).stop(stopAll,goToEnd); //停止id为panel的动画 $("#stop").click(function(){ $("#panel").stop(); });

六、链(Chaining)

//对标签进行多个动画 // id为p1的先变红然后上滑动画接着下滑动画 $("#p1").css("color","red").slideUp(2000).slideDown(2000);