java实现窗口渐影消失_jQuery实现动画、消失、显现、渐出、渐入效果示例

本文实例讲述了jQuery实现动画、消失、显现、渐出、渐入效果。分享给大家供大家参考，具体如下：

$(function(){

$(but1).on("click",function(){

$("img").hide(500) ; //消失

}) ;

$(but2).on("click",function(){

$("img").show(5000) ; //显现

}) ;

$(but3).on("click",function(){

$("img").slideUp(5000) ; //滑动消失

}) ;

$(but4).on("click",function(){

$("img").slideDown(5000) ; //滑动显现

}) ;

$(but5).on("click",function(){

$("img").slideToggle(5000) ; //滑动切换(消失后显现，显现后消失)

}) ;

$(but6).on("click",function(){

$("img").fadeOut(5000) ; //淡出

}) ;

$(but7).on("click",function(){

$("img").fadeIn(5000) ; //淡入

}) ;

$(but8).on("click",function(){

$("img").fadeTo(500,0.5) ; //淡化

}) ;

$(but9).on("click",function(){

$("div").animate({left:"800px"},5000) ; //移动(需要调整对象的style属性中position的值absolute)

}) ;

}) ;

运行效果(这里使用了本站演示图片加以测试)：

这里的方法都可以再嵌套方法。

对象.方法名(延迟时间,function(){新的方法});

比如，消失后显现

$(but1).on("click",function(){

$("img").hide(500,function(){

$("img").show(5000) ;

}) ;

}) ;

比如，移动后再移回

$(but9).on("click",function(){

$("div").animate({left:"800px"},5000,function(){

$("div").animate({left:"0px"},5000) ;

}) ;

}) ;

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。