JQuery自学记录2——部分动态效果

利用JQuery的一些函数可以直接实现部分动态的效果，主要涉及以下几个（还有很多）：

1、隐藏与显示：hide(); show(); toggle();

2、滑动效果：slideDown(); slideUp(); slideToggle();

3、渐变效果：fadeIn(); fadeOut(); fadeTo();

4、自定义动画函数：animate();

一、hide(); show();  toggle();

语法格式：

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

$(selector).toggle(speed,callback)

说明：

speed：（可选）设置效果的变化速度，有slow, fast, normal或具体毫秒值可以选。

callback：（可选）设置后续执行函数。注：是在该效果100%执行完毕后才会执行callback函数，根据具体情况使用。当变化速度慢时可能出现效果混乱。

实例：

 <script type="text/javascript">    $(document).ready(function(){$("p").hide(1000,function(){alert("The paragraph is now hidden");});    });  </script> 

二、slideDown(); slideUp(); slideToggle();

语法格式：

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

三、fadeIn(); fadeOut(); fadeTo();

语法格式：

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

说明：

fadeTo() 函数中的 opacity （可选）参数规定减弱到给定的不透明度

四、animate();

语法格式：

$(selector).animate({params},[duration],[easing],[callback])

说明：

params：（必需）该变化的目标css样式

duration：（可选）类似上面的speed，设置该变化的速度，有slow, fast, normal或具体毫秒值可以选。

easing：（可选）设置动画不同时间点的速度，备选swing, linear，更多效果需要扩展插件。（没有试验过具体效果）

callback：（可选）同上。

实例：

  <script type="text/javascript">    $(document).ready(function(){$("#start").click(function(){$("#box").animate({height:300},"slow");$("#box").animate({width:300},"slow");$("#box").animate({height:100},"slow");$("#box").animate({width:100},"slow");});    });  </script> 

未完待续……