jQuery学习笔记之二：显示效果

最新推荐文章于 2025-09-07 22:53:08 发布

HorseRunningNoStop

最新推荐文章于 2025-09-07 22:53:08 发布

阅读量424

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP

本文链接：https://blog.youkuaiyun.com/HorseRunningNoStop/article/details/51433797

PHP 专栏收录该内容

55 篇文章

订阅专栏

本文介绍如何使用jQuery库实现HTML元素的显示隐藏、淡入淡出、滑动及自定义动画效果，并通过示例代码展示具体应用。

1、显示隐藏

使用 hide() 和 show() 方法来隐藏和显示 HTML 元素；使用 toggle() 方法来切换 hide() 和 show() 方法。

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

其中speed 为隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒； callback 为执行操作hide()、show()、 toggle() 方法完成后所执行的函数名称。

<pre name="code" class="html">$("#hide").click(function(){
  $("p").hide();
<pre name="code" class="html">  $("p").hide(2000);

});$("#show").click(function(){ $("p").show();});

</pre><span style="font-family: Verdana, Arial, 宋体; font-size: 13.3333px; line-height: 18px;"><span style="font-size: 12px; background-color: rgb(249, 249, 249);"><span style="font-size: 12px;"></span></span></span><pre name="code" class="html">$("#toggle").click(function(){
  $("p").toggle();
});

2、淡入淡出(fadein fadeout fadetoggle fadeto)

语法：

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

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

fadeIn() 用于淡入已隐藏的元素;fadeOut() 方法用于淡出可见元素;fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换;fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）,opacity为透明度值,speed和callback同1。

示例：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
<pre name="code" class="html">  $("#div1").fadeTo("slow",0.15);

});

3、滑动(slidedown slideup slidetoggle)

语法：

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

slideDown() 方法用于向下滑动元素；slideUp() 方法用于向上滑动元素； slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

4、自定义动画(animate)

语法：

$(selector).animate({params},speed,callback);

params 参数定义形成动画的 CSS 属性。params的css属性即为动作后的最终属性。

示例1：

$("button").click(function(){
  $("div").animate({left:'250px'});
});

示例2：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

这种效果就像制作视频的过程一样，一帧一帧串起来就成了一个动画。

具体的动画效果可参见：http://www.w3school.com.cn/jquery/jquery_animate.asp

5、停止动画或者滑动(stop)

stop() 方法用于停止动画或效果，在它们完成之前，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法：

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

示例：

$("#panel").stop();

6、链条式

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

可依次执行。