Cyh的博客

Email:kissyan4916@163.com
posts - 26, comments - 19, trackbacks - 0, articles - 220

(转)jQuery入门(7):效果

Posted on 2010-01-25 00:03 啥都写点 阅读(266) 评论(0)  编辑  收藏 所属分类: JavaScript

效果 

基本
show()
:显示隐藏的匹配元素

<p style="display: none">Hello</p>

代码:$("p").show()

 

show(speed,callback):显示所有匹配的元素,并在显示完成后可选地触发一个回调函数

<p style="display: none">Hello</p>

代码:$("p").show("slow");

代码://用迅速的动画将隐藏的段落显示出来,历时200毫秒。

$("p").show("fast",function(){

   $(this).text("Animation Done!");

 });

代码://将隐藏的段落用将近4秒的时间显示出来

$("p").show(4000,function(){

   $(this).text("Animation Done...");

 });

 

hide()隐藏显示的元素

$("p").hide()

 

hide(speed,callback)show(speed,callback)相反~

 

toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的

<p>Hello</p><p style="display: none">Hello Again</p>

代码:$("p").toggle()

结果:<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>

 

滑动
slideDown(speed,callback)
通过高度变化向下增大来动态地显示所有匹配的元素在显示完成后可选地触发一个回调函数。

代码:用600毫秒缓慢的将段落滑下

$("p").slideDown("slow");

代码:用200毫秒快速将段落滑下,之后弹出一个对话框

$("p").slideDown("fast",function(){

   alert("Animation Done.");

 });

 

slideUp(speed,callback):通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数

代码:用600毫秒缓慢的将段落滑上

$("p").slideUp("slow");

代码:用200毫秒快速将段落滑上,之后弹出一个对话框

$("p").slideUp("fast",function(){

   alert("Animation Done.");

 });

 

slideToggle(speed,callback):通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数

代码:$("p").slideToggle("slow");

代码:用200毫秒快速将段落滑上或滑下,之后弹出一个对话框

$("p").slideToggle("fast",function(){

   alert("Animation Done.");

 });

 

淡入淡出
fadeIn(speed,callback)
通过不透明度的变化来实现所有匹配元素的淡入效果并在动画完成后可选地触发一个回调函数

代码:用600毫秒缓慢的将段落淡入

$("p").fadeIn("slow");

代码:用200毫秒快速将段落淡入,之后弹出一个对话框

$("p").fadeIn("fast",function(){

   alert("Animation Done.");

 });

 

fadeOut(speed,callback):通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数

代码:用600毫秒缓慢的将段落淡出

$("p").fadeOut("slow");

代码:用200毫秒快速将段落淡出,之后弹出一个对话框

$("p").fadeOut("fast",function(){

   alert("Animation Done.");

 });

 

fadetTo(speed,opacity,callback):把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数

代码:用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度

$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);

代码:用200毫秒快速将段落的透明度调整到0.25,大约1/4的可见度,之后弹出一个对话框

$("p").fadeTo("fast", 0.25, function(){

   alert("Animation Done.");

 });

 

自定义
animate(params[,duration[,easing[,callback]]])

说明用于创建自定义动画的函数

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合

duration (String,Number) : (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(:1000)

easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" "swing".

callback (Function) : (可选) 在动画完成时执行的函数

 

<button id="go"> Run</button>

<div id="block">Hello!</div>

代码:// 在一个动画中同时应用三种类型的效果

$("#go").click(function(){

 $("#block").animate({

    width: "90%",

    height: "100%",

    fontSize: "10em",

    borderWidth: 10

 }, 1000 );

});

 

<button id="left">«</button> <button id="right">»</button>

<div class="block"></div>

代码:让指定元素左右移动

$("#right").click(function(){

 $(".block").animate({left: '+50px'}, "slow");

});

$("#left").click(function(){

 $(".block").animate({left: '-50px'}, "slow");

});

 

代码:在600毫秒内切换段落的高度和透明度

$("p").animate({

   height: 'toggle', opacity: 'toggle'

 }, "slow");

 

代码:用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)

$("p").animate({

   left: 50, opacity: 'show'

 }, 500);

 

代码:一个使用easein函数提供不同动画样式的例子。只有使用了插件来提供这个easein函数,这个参数才起作用。

$("p").animate({

   opacity: 'show'

 }, "slow", "easein");

 

animate(params,options)

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合

options (Options) : 一组包含动画选项的值的集合。

选项

duration (String,Number) : (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(:1000)

easing (String) : (默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" "swing".

complete (Function) : 在动画完成时执行的函数

step (Callback) : Template:APICallback

queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

 

示例

第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始。

第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.

<button id="go1">» Animate Block1</button>

<button id="go2">» Animate Block2</button>

<div id="block1">Block1</div><div id="block2">Block2</div>

代码:

$("#go1").click(function(){

 $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )

     .animate( { fontSize: '10em' } , 1000 )

     .animate( { borderWidth: 5 }, 1000);

});

$("#go2").click(function(){

 $("#block2").animate( { width: "90%"}, 1000 )

     .animate( { fontSize: '10em' } , 1000 )

     .animate( { borderWidth: 5 }, 1000);

});

 

代码:600毫秒切换段落的高度和透明度

$("p").animate({

   height: 'toggle', opacity: 'toggle'

 }, { duration: "slow" });

 

代码:500毫秒将段落移到left50的地方并且完全清晰显示出来透明度为1

$("p").animate({

   left: 50, opacity: 'show'

 }, { duration: 500 });

 

代码:一个使用easein函数提供不同动画样式的例子。只有使用了插件来提供这个easein函数,这个参数才起作用。

$("p").animate({

   opacity: 'show'

 }, { duration: "slow", easing: "easein" });

 

stop()停止所有在指定元素上正在运行的动画

<button id="go">Go</button> <button id="stop">STOP!</button>

<div class="block"></div>

<button id="go">Go</button> <button id="stop">STOP!</button>

<div class="block"></div>

代码:点击Go之后开始动画,Stop之后会在当前位置停下来

// Start animation

$("#go").click(function(){

 $(".block").animate({left: '+200px'}, 5000);

});

// Stop animation when button is clicked

$("#stop").click(function(){

 $(".block").stop();

});

 

queue():返回指向第一个匹配元素的队列(将是一个函数数组)

 <style>

 div { margin:3px; width:40px; height:40px;

        position:absolute; left:0px; top:30px;

        background:green; display:none; }

 div.newcolor { background:blue; }

 span { color:red; }

 </style>

 <button id="show">Show Length of Queue</button><span></span><div></div>

代码:显示队列长度

$("#show").click(function () {

      var n = $("div").queue("fx");

      $("span").text("Queue length is: " + n.length);

});

function runIt() {

      $("div").show("slow");

      $("div").animate({left:'+=200'},2000);

      $("div").slideToggle(1000);

      $("div").slideToggle("fast");

      $("div").animate({left:'-=200'},1500);

      $("div").hide("slow");

      $("div").show(1200);

      $("div").slideUp("normal", runIt);

}

runIt();

 

queue(callback):在匹配的元素的动画队列中添加一个函数

 

queue(queue):将匹配元素的动画队列用新的一个队列来代替(函数数组).

 

dequeue():从动画队列中移除一个队列函数



                                                                                                       --    学海无涯