网站设计中经常会用到的jquery 动画效果责任编辑 :李飞    文章来源 :星翼创想(www.iswweb.com)    发布时间 :2014-08-08    阅读次数:3914

 网站设计中经常会用到的jquery 动画效果，总结一下，用起来的时候会方便很多，现在的网页设计中惊颤工会用到jQuery，所以多总结才能有进步。

隐藏和显示

瞬间隐藏和显示

$("#hide").click(function(){   $("p").hide(); });  $("#show").click(function(){   $("p").show(); });

渐显、隐

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

在两种状态间切换

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

淡入淡出

淡入

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); });

淡出

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeOut();     $("#div2").fadeOut("slow");     $("#div3").fadeOut(3000);   }); });

状态切换

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeToggle();     $("#div2").fadeToggle("slow");     $("#div3").fadeToggle(3000);   }); });

淡出的不同速度、程度

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeTo("slow",0.15);     $("#div2").fadeTo("slow",0.4);     $("#div3").fadeTo("slow",0.7);   }); });

滑动

简明语法

$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。
向下滑动

$(document).ready(function(){   $(".flip").click(function(){     $(".panel").slideDown("slow");   }); });

向上滑动

$(document).ready(function(){   $(".flip").click(function(){     $(".panel").slideUp("slow");   }); });

折叠打开效果

$(document).ready(function(){ $(".flip").click(function(){     $(".panel").slideToggle("slow");   }); });

自定义动画

jQuery animate()

$("button").click(function(){   $("div").animate({     left:’250px’,     opacity:’0.5’,     height:’150px’,     width:’150px’   }); });

animate()接受一个字典类型的参数，该参数决定所选元素动画结束时所处的状态
动画的值可以是 "show"、"hide" 或 "toggle"：

$("button").click(function(){   $("div").animate({     height:’toggle’   }); });

并且所有的动画按照动画序列来做

$("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"); });

停止动画

$(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown(5000);   });   $("#stop").click(function(){     $("#panel").stop();   }); });

$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

当然jquery语句也可以级联调用

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

文章转载请保留网址：http://www.iswweb.com/news/solutions/1000.html