jQuery 效果

jQuery 效果- 隐藏和显示

隐藏、显示、切换,滑动,淡入淡出,以及动画!

jQuery hide() 和 show()

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

语法:

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

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

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jQuery toggle()

通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素,并隐藏已显示的元素。

语法:

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

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".hot").toggle();
  });
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<div class="hot">
<img src="http://www.pp3.cn/uploads/201510/2015102409.jpg" height="300px" width="200px">
<p>这是一张图片</p>
</div>
</body>
</html>

淡入淡出

jQuery Fading 方法

通过 jQuery,您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法:

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

语法:

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

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

可选的 callback 参数是该函数完成后所执行的函数名称。

滑动

jQuery 滑动方法

通过 jQuery,您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法:

slideDown()

slideUp()

slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body> 
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

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

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

动画

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法:

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

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。 
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:yellow;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

jQuery 停止动画

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法:

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

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

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

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

下面的例子演示 stop() 方法,不带参数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
 
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); }); </script> </head> <body> <button>开始动画</button> <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
提交重置代码
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载
男神

男神

文字太多了,眼睛都看花了

4年前    添加回复 0

回复
女神的闺蜜爱上我

女神的闺蜜爱上我

内容比较基础,适合小白学习。

4年前    添加回复 0

回复
汪汪

汪汪

左边排版有点乱的感觉

4年前    添加回复 0

回复
大神,求带!

大神,求带!

我要试验一下隐藏

4年前    添加回复 0

回复
学习ing

学习ing

看来才发现,网页中用到动画的地方好多啊

4年前    添加回复 0

回复
Alway.以为

Alway.以为

代码回不来?

4年前    添加回复 0

回复
男神

男神

fadeIn() 用于淡入已隐藏的元素 fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换 fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间) slideDown() 方法用于向下滑动元素

4年前 0

素颜

素颜

$(document).ready(function(){ $("button").click(function(){ $(".hot").toggle(); }); });

4年前 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~