jquery动画

来源：互联网发布：登录mysql命令编辑：程序博客网时间：2024/06/17 05:15

jquery动画

一、基本动画形式

1.show()显示效果

语法：show(speed,callback)

speend：可选，为动画执行时间，单位为毫秒。也可以为“slow”,”normal”,”fast”　
callback：可选,为当动画完成时执行的函数。

2、hide()隐藏效果

　语法:hide(speed,callback)　

<body><p id="text">This is a example</p><input type="button" class="btn1" value="Hide"><input type="button" class="btn2" value="Show"><script src="jquery.min.js"></script><script src="velocity.min.js"></script><script src="velocity.ui.min.js"></script><script>    $(document).ready(function(){        $(".btn1").click(function(){            $("p").hide(1000);        });        $(".btn2").click(function(){            $("p").show(1000,showColor);            $("p").css("background-color","red");        });    });    function showColor(){        $("p").css("background-color","green");    }</script></body>

3、toggle()

toggle()隐藏显示自动切换，当目前为显示则隐藏，当目前为隐藏则显示

switch :可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

* True - 显示所有元素* False - 隐藏所有元素* 如果设置此参数，则无法使用 speed 和 callback 参数。

语法：toggle(speed,callback,switch)　
　　　　
　　

<body><p>This is a example</p><p style="display: none">This is a example2</p><input type="button" value="p显示" class="btn1"><p class="p1">This is a example3</p><input type="button" value="toggle" class="btn2"><script src="jquery.min.js"></script><script src="velocity.min.js"></script><script src="velocity.ui.min.js"></script><script>$(document).ready(function(){    $(".btn1").click(function(){        $("p").toggle(true);    });});$(document).ready(function(){    $(".btn2").click(function(){        $(".p1").toggle(1000);    });});</script></body>

4、slideDown()

slideDown():向下显示。 slow()是水平与垂直方向同时展开，而slideDown是仅仅在垂直方向向下展开

easing 可选。规定在动画的不同点上元素的速度。默认值为 “swing”。

可能的值：

“swing” - 在开头/结尾移动慢，在中间移动快
“linear” - 匀速移动
语法:slideDown(speed,easing,callback)

5、slideUp()

slideUp():向上隐藏,　　hide()是水平与垂直两个方向的，而slideUp()仅仅是垂直方向向上收起隐藏

　　语法:slideUp(speed,callback)

<body><p>This is a example</p><input type="button" class="btn1" value="slideUp"><input type="button" class="btn2" value="slideDown"><script src="jquery.min.js"></script><script src="velocity.min.js"></script><script src="velocity.ui.min.js"></script><script> $(document).ready(function(){     $(".btn1").click(function(){         $("p").slideUp(1000,function(){             alert("slideUp()方法已完成");         });     });     $(".btn2").click(function(){         $("p").slideDown(1000,function(){             alert("slideDown()方法已完成");         });     }); });</script></body>

6、slideToggle

垂直方向上切换,toggle是水平与垂直两个方向上的，而slideToggle是仅仅垂直方向的。

语法:slideToggle(speed,callback)
　　　　

7、fadeIn()

以改变透明度来显示

　　语法：fadeIn(speed,callback)　　　
　　
　　$(“#div1”).FadeIn(3000,function(){ alert(“淡入显示成功!”); });

8、fadeOut()

以改变透明度来隐藏

　　语法：fadeOut(speed,callback)　　
　　

<body><p>This is a paragraph</p><input type="button" value="hide" class="btn1"><input type="button" value="show" class="btn2"><script src="jquery.min.js"></script><script src="velocity.min.js"></script><script src="velocity.ui.min.js"></script><script>    $(document).ready(function(){        $(".btn1").click(function(){            $("p").fadeOut(1000);        });        $(".btn2").click(function(){            $("p").fadeIn(1000);        });    });</script></body>

9、animate()

自定义动画，一般来说数字变动都可以用于动画。

语法：animate(style,speed,easing,callback);　　样式参数，时间，可选择，函数

styles 必需。规定产生动画效果的 CSS 样式和值。
speed 可选。规定动画的速度。默认是 “normal”。
easing 可选。规定在不同的动画点中设置动画速度的 easing 函数。
callback 可选。animate 函数执行完之后，要执行的函数。

<body><div id="box" style="background-color: yellowgreen"></div><button class="btn1">animate</button><button class="btn2">reset</button><script src="jquery.min.js"></script><script src="velocity.min.js"></script><script src="velocity.ui.min.js"></script><script>    $(document).ready(function(){        $(".btn1").click(function(){            $("#box").animate({                height:"300px"            });        });        $(".btn2").click(function(){            $("#box").animate({                height:"100px"            });        });    });</script></body>

9、stop()

停止正在执行动画

stop([clearQueue],[gotoEnd]);　　两个参数均为布尔值，

第一个表示，是否停止动画执行
第二个表示，如果停止，是否立即变为执行完成的状态，如果设置为否，则停留在执行一半的状态。
　　$(“#div1”).hide(5000)　　//此动画正在执行
　　$(“#div1”).stop();　　　　//上一行代码指定的动画停止在一半状态
　　$(“#div1”).stop(true,true);　　//停止当前动画，同时动画切换到完成执行状态。

<body><p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p><div id="box" style="background:#98bf21;height:100px;width:100px;position:relative"></div><script src="jquery.min.js"></script><script src="velocity.min.js"></script><script src="velocity.ui.min.js"></script><script>    $(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");        });        $("#stop").click(function(){            $("#box").stop(true);        });    });</script></body>

10、delay()

延迟执行动画　　当一个动画stop()了之后还能够用delay()来延迟执行。从停止位置继续执行。当然用原来的方法继续执行也不可，不过没有延时效果。

　　delay(duration,[queueName])　　设置一个延迟值来执行动画

　　$(“#div1”).delay(3000).hide(3000);　　//表示在3000毫秒后执行hide(3000);

阅读全文

0 0