JQuery动画与特效实例分析-6ren

JQuery动画与特效实例分析

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JQuery动画与特效实例分析由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例分析了JQuery动画与特效的用法。分享给大家供大家参考。具体分析如下:

显示与隐藏。

show(spped,[callback])与hide(spped,[callback]) speed可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms。也可以直接填毫秒数，callback函数为回调函数，动作完成后调用此函数。

 
    ? 
   
         $( 
         "img" 
         ).show(3000, 
         function 
         (){  
        
         $( 
         this 
         ).css( 
         "border" 
         ,"solid 1px 
         #ccc”);  
        
         });

toggle()函数，无参格式，在显示和隐藏之间切换 toggle(true orfalse) 带布尔值形式，为true时显示元素，否则，隐藏元素 toggle(speed,[callback])与show()函数用法类似。

滑动。

slideDown(spped,[callback])与slideUp(spped,[callback]) 本质上是改变元素的高度 slideToglge(spped,[callback])切换slide效果。

淡入淡出。

fadeIn(spped,[callback])与fadeOut(spped,[callback]) 本质上是改变元素的透明度 fadeTo(spped,opacity,[callback]); opacity为透明度，0到1之间，1为全透明。

自定义动画。

animate(params,[duration],[easing],[callback]) params表示用于制作动画效果的属性样式和值得集合 duration表示三种默认的速度字符，slow、normal、fast或自定义的毫秒数 easing为动画插件使用，用于控制动画的表现效果，通常有linear和swing字符值 callback为动画完毕后，执行的回调函数。

 
    ? 
   
         $( 
         this 
         ).animate(  
        
         {   width: 
         "20%" 
         ,  
        
         height: 
         "70px"    
        
         },  
         //对象表示法，JQuery中常用这种格式传递参数  
        
         3000,  
        
         function 
         (){  
        
         $( 
         this 
         ).css( 
         "border" 
         : 
         "solid 3px #666" 
         )  
        
         .html( 
         "变大了！！" 
         );  
        
         }  
        
         ); 
         //传递参数时，必须用骆驼法来写属性名称，如font-size必须写成fontSize

 
    ? 
   
         $( 
         "p" 
         ).animate(  
        
         { left: 
         "20px" 
         ,  
        
         top: 
         "70px" 
        
         },  
        
         3000  
        
         )  
         //向右移动20像素，向下移动70像素

stop([clearQueue],[gotoEnd]) clearQueue是一个布尔值，表示是否停止正在执行的动画 gotoEnd是一个布尔值，表示是否立即完成正在执行的动画 delay(duration,[queueName]) duration为延迟的时间值 queueName表示队列名词，即动画队列。

 
    ? 
   
         $( 
         "a :eq(0)" 
         ).click( 
         function 
         (){  
        
         $( 
         "img" 
         ).slideToggle(3000);  
        
         });  
         //“拉窗帘”方式切换图片  
        
         $( 
         "a:eq(1)" 
         ).click( 
         function 
         (){  
        
         $( 
         "img" 
         ).stop();  
        
         });  
         //停止正在执行的动画  
        
         $( 
         "a:eq(2)" 
         ).click( 
         function 
         (){  
        
         $( 
         "img" 
         ).delay(2000)  
        
         .slideToggle(3000);  
        
         });  
         //延时切换图片