JQUERY常用效果简单实现方法淡入淡出，隐藏等

最新推荐文章于 2024-04-11 20:08:56 发布
最新推荐文章于 2024-04-11 20:08:56 发布
阅读量1k 收藏 1
点赞数
分类专栏： jquery
淡入淡出
<script src="http://cdn.static.runoob.com/libs/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>

显示/隐藏

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>

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

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

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

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

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

$ ( " button " ) . click ( function ( ) { $ ( " p " ) . hide ( 1000 ) ; } ) ;


jQuery toggle()

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

显示被隐藏的元素，并隐藏已显示的元素：

实例

$ ( " button " ) . click ( function ( ) { $ ( " p " ) . toggle ( ) ; } ) ;

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>

jQuery slideDown() 方法

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

语法:

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

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

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

下面的例子演示了 slideDown() 方法：

实例

$ ( " #flip " ) . click ( function ( ) { $ ( " #panel " ) . slideDown ( ) ; } ) ;

<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</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>
 
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>


jQuery slideUp() 方法

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

语法:

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

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

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

下面的例子演示了 slideUp() 方法：

实例

$ ( " #flip " ) . click ( function ( ) { $ ( " #panel " ) . slideUp ( ) ; } ) ;

jQuery slideToggle() 方法

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

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

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

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

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

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

下面的例子演示了 slideToggle() 方法：

实例

$ ( " #flip " ) . click ( function ( ) { $ ( " #panel " ) . slideToggle ( ) ; } ) ;

<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</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>
 
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>


连接http://www.runoob.com/try/try.php?filename=tryjquery_hide_callback


riuhazen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery动画效果---隐藏/显示，淡入淡出，滑动，动画
I_am_shy的博客
03-10 729
jquery可以实现很多流畅的动画效果。可以用 animate() 方法来操作所有 几乎所有的CSS 属性
jQuery动画（显示隐藏，淡入淡出，滑动）
TangJing_的博客
07-30 2777
目录 分类 基本动画函数 显示元素 交替显示隐藏 滑动效果 向上收缩效果 向下展开效果 交替伸缩样式 淡入淡出效果 淡入效果 淡出效果 自定义不透明度 jQuery的动画函数 分类 基本动画函数：既有透明度渐变，又有滑动效果。是最常用的动画效果函数 滑动动画函数：仅使用滑动渐变效果 淡入淡出动画函数：仅使用透明度渐变效果 基本动画函数 显示元素 jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数，他的动画效果是向左上..
jQuery实现淡入淡出
最新发布
hexadecimal_001的博客
04-11 389
淡入淡出可以让我们的网页更加美观，更加丰富，今天来看一下淡入淡出效果。
c3 淡入动画
MAYA_G的博客
06-29 417
使用c3 做淡入效果 forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 animation-name: fadeIn; /*动画名称*/ animation-duration: 1s; /*动画持续时间*/ animation-iteration-count: 1; /*动画次数*/ animation-delay: 0s; /*延迟时间*/ animation-fill-mode: forwards; /*停留在最后一帧/ @keyframes fadeIn {
jQuery方法---淡入显示与淡出隐藏
weixin_50652993的博客
08-16 582
jQuery方法---淡入显示与淡出隐藏一、淡入显示二、淡出隐藏三、淡入显示与淡出隐藏切换拓展：淡出淡入设置不透明度 一、淡入显示 html部分 <body> <div class="div_top">点击显示底部盒子</div> <div class="div_bottom">我是底部盒子</div> </body> css部分 .div_top{ width:200px; height:20px; background-
一个简单的c3动画
08-22
css3动画，简单的rotate动画
jQuery实现基本淡入淡出效果的方法详解
12-10
本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考，具体如下： jQuery fadeIn()方法：用于淡入已隐藏的元素 jQuery fadeOut()方法：用于淡出可见的元素 <!DOCTYPE html> <html> &lt...
jQuery实现新闻播报滚动及淡入淡出效果示例
11-28
本文实例讲述了jQuery实现新闻播报滚动及淡入淡出效果。分享给大家供大家参考，具体如下： 下面是上下滚动源码 <!DOCTYPE ...
jQuery实现首页图片淡入淡出效果的方法
12-29
本文实例讲述了jQuery实现首页图片淡入淡出效果的方法。分享给大家供大家参考。具体分析如下： 这里演示当当网的品牌店铺首页效果，演示地址为：http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下...
jQuery实现DIV层淡入淡出拖动特效的方法
12-11
本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <...
jQuery实现的淡入淡出与滑入滑出效果示例
10-18
总之，jQuery 的淡入淡出和滑入滑出效果是网页动态设计中常用且实用的技术，它们为开发者提供了强大的工具，使得创建引人入胜的用户体验变得更加简单。通过熟练掌握这些方法，开发者能够更好地提升网站或应用的视觉...
详细介绍jQuery淡入淡出元素的方法
menyaliqi的专栏
08-28 1295
为了达到更为生动的效果，可以把一个元素淡出或淡入，在任何一种情况下，都只是随着时间来改变元素的透明度。jQuery提供了3个和淡入淡出相关的函数： ·fadeIn（）使得一个隐藏的元素淡入视野。首先，元素占据的空间出现在页面上（这可能意味着页面上的其他元素要移走）；然后，元素逐渐地变得可见。如果元素在页面上已经可见，则这个函数没有任何效果。如果没有提供一个速度值，元素使用“常规”设置来淡入（40
利用CSS3制作淡入淡出动画效果
weixin_33912246的博客
06-14 1074
  CSS3新增动画属性“@-webkit-keyframes”，从字面就可以看出其含义——关键帧，这与Flash中的含义一致。 利用CSS3制作动画效果其原理与Flash一样，我们需要定义关键帧处的状态效果，由CSS3来驱动产生动画效果。 下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。 1. 定义动画，名称为fadeIn @-webkit...
jQuery 实现淡入淡出效果
ivenqin的博客
07-25 1426
上一节我们学习了如何实现元素的显示与隐藏，本节我们来学习如何实现元素的淡入淡出效果。 fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素。 语法如下所示： $(selector).fadeIn(speed,callback); speed：规定效果的时长，可选值有 slow、fast 或毫秒。 callback：是 fading 完成后所执行的函数名称。 示例： 例如当我们点击按钮时，将紫色正方形设置为淡入效果： <!DOCTYPE html> <html> &l
[jquery] 动画 show hide toggle，下拉显示---slideDown,淡入淡出----fadeIn, animate() ,停止动画---stop,finish
qq_14993591的博客
10-10 488
jQuery 的动画函数 : 1. jQuery 的基础动画 show() hide() toggle() <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: pink; } </style> <button>显示</button> <button>隐藏</button> <butt
jquery控制元素的隐藏和显示的几种方法。
weixin_30788731的博客
03-07 2880
组织略显凌乱，请耐心看！ 使用jquery控制div的显示与隐藏，一句话就能搞定，例如： 1.$("#id").show()表示为display：block， $("#id").hide()表示为display:none; 2.$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。 3.$("#id").css...
jquery控制元素的淡入淡出切换
weixin_34237596的博客
08-18 639
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery</title> <script src="jquery.js" type="text/javascript"></...
jQuery卷轴实现动画淡入淡出
11-18
以下是使用jQuery实现卷轴动画淡入淡出的示例代码： HTML代码： ```html ``` CSS代码： ```css .scroll-container { position: relative; width: 600px; height: 400px; overflow: hidden...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值