JQuery 淡出、 动画、显示/隐藏切换等效果

最新推荐文章于 2024-04-24 10:26:01 发布
最新推荐文章于 2024-04-24 10:26:01 发布
阅读量213 收藏 2
点赞数
文章标签： 切换 效果 动画 隐藏 jquery
原文地址为： JQuery 淡出、 动画、显示/隐藏切换等效果

1、jQuery slideToggle() 表示简单的 slide panel 效果。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:70px;
display:none;
}
</style>
</head>
 
<body>
 <p class="flip">请点击这里</p>
 <br/>
 <br/>
<div class="panel"  style="width:200px">
<p>JQuery</p>
<p>爱，别太认真</p>
</div>

 

2、jQuery fadeTo()表示简单的淡出效果。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("div").fadeTo("slow",0.25);
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:300px;height:300px">
<button type="button">点击这里查看淡出效果</button>
</div>

</body>

</html>

 

 

3、jQuery animate() 动画效果

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({height:500},"slow");
  $("#box").animate({width:500},"slow");
  $("#box").animate({height:150},"slow");
  $("#box").animate({width:150},"slow");
  });
});
</script> 
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="background:red;height:150px;width:150px;position:relative">
</div>

</body>
</html>

 4、显示/隐藏切换效果 $("p").toggle();

html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">显示/隐藏切换效果</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

 5、jQuery 效果

函数描述
$(selector).hide()隐藏被选元素
$(selector).show()显示被选元素
$(selector).toggle()切换（在隐藏与显示之间）被选元素
$(selector).slideDown()向下滑动（显示）被选元素
$(selector).slideUp()向上滑动（隐藏）被选元素
$(selector).slideToggle()对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()淡入被选元素
$(selector).fadeOut()淡出被选元素
$(selector).fadeTo()把被选元素淡出为给定的不透明度
$(selector).animate()对被选元素执行自定义动画

转载请注明本文地址： JQuery 淡出、 动画、显示/隐藏切换等效果
wcqlwyt
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
20、JQuery实现动画（JQuery对象显示、隐藏、切换）
l0510402015的博客
05-13 344
三种方式显示和隐藏元素 1.默认显示和隐藏方式 1.show([speed,[easing],[fn]]) 1.参数： 1.speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) 2.easing：用来指定切换效果，默认是"swing"，可用参数"linear" * swin...
JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
dienangpiao2051的博客
09-19 542
JQuery：效果 JQuery效果有很多，包括隐藏、显示、切换，滑动，淡入淡出，以及动画等。隐藏：JQuery hide() 显示：JQuery show() 切换：JQuery toggle(） 淡入淡出：JQuery fadeIn()、JQuery fadeOut()、JQuery fadeToggle()、JQuery fadeTo() 滑动：JQuery slideD...
jQuery 下部分--头歌（educoder)实训作业题目及答案
最新发布
qq_69173578的博客
04-24 2205
jQuery动画
JQuery动画淡入淡出效果
七七的博客
06-15 247
淡入淡出显示和隐藏方式 fadeIn( [speed], [easing],[fn]) fadeout([speed], [easing],[fn]) fadeToggle([ speed, [easing],[fn]]) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script
jquery语法学习12（淡入淡出动画 自定义动画 停止动画）
时意
08-14 560
1）淡入淡出动画 1.fadeIn 淡显动画 2.fadeOut 淡隐动画 3.fadeToggle 动画切换 4.fadeTo 淡显到 下面是代码 这里注意一下 动画里能做动画效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
JQuery动画的显示和隐藏
zybijiso666的博客
08-01 262
3、toogle()：可以使用toogle()方法切换hide()和show()方法。可选的speed参数规定效果的时长:可以取"slow"、 "fast" 或亳秒。1、hide()：可以使用hide()方法来隐藏html元素。2、show()：可以使用show方法来显示html元素。可选的callback参数是动画完成后所执行的函数名称。显示被隐藏的元素，并隐藏已显示的元素。
jQuery文字切换动画效果
06-10
通过将这些样式应用到HTML元素上，可以控制文字在切换时的显示效果，比如淡入淡出、滑动等。 `js`文件夹内通常包含`jquery.js`（jQuery库本身）和一个或多个自定义的JavaScript文件，如`script.js`。在`script.js`...
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
10-15
本篇文章将深入探讨jQuery中的几个常用特效：显示与隐藏、淡入淡出、滑动以及动画，通过实例代码来帮助理解这些功能。 ### 显示与隐藏 在jQuery中，显示和隐藏元素是最基本的操作之一。`show()`方法用于显示被选...
jQuery表单动画切换效果.zip_jQuery表单动画切换效果
09-24
"jQuery表单动画切换效果"是一个示例项目，旨在演示如何利用jQuery来创建吸引人的交互式表单切换效果，提高用户体验。这个压缩包包含了必要的HTML文件和可能的CSS或JavaScript资源，以实现这种动画效果。 首先，` ...
jQuery 隐藏/显示效果函数用法实例分析
10-15
此外，jQuery还提供了其他丰富的效果方法，如淡入淡出（fadeIn/fadeOut）、滑动效果（slideUp/slideDown）等，这些都是构建动态Web页面的重要工具。 在实际项目中，结合使用这些效果函数可以创造出各种各样的交互式...
jQuery文字滚动切换动画特效
06-24
在这个特效中，jQuery的主要作用就是处理文字的滚动和切换，通过编程方式控制文本的显示和隐藏，实现平滑过渡的动画效果。 "文字滚动切换"通常有两种常见形式：水平滚动和垂直滚动。在这个特效中，可能是通过设置...
JQUery 动画——隐藏和显示
专注Java（全栈）应用开发，求知若渴，虚心若愚，talk is cheap, show me the code.
03-17 345
切换3个布局：根据formid进行切换： <div id = "doorInfo" class="panel panel-default doorinfo" style="display:none"> <div class="panel-heading">门信息</div> <div class="panel-body"> ...
jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
weixin_30652491的博客
01-09 172
jQuery效果 隐藏、显示、切换、滑动、淡入淡出、以及动画 1、隐藏与显示(改变：display：none;) hide()——隐藏 show()——显示 toggle()方法：可以使用它来切换hide()与show()方法 eg1：显示 <style type="text/css"> *{margin:0;padding:0;} .body{...
JQuery实现隐藏和显示的动画效果
Cavewang的博客
09-12 1432
JQuery实现隐藏和显示的动画效果隐藏和显示语法实现代码效果展示淡入和淡出语法实现代码 隐藏和显示 语法 $(selector).fadeIn([speed,callback]); $(selector).fadeOut([speed,callback]); $(selector).fadeToggle([speed,callback]); 参数说明： 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。 可选的 callback 参数是隐藏或显示完成后所执行
jQuery动画的显示与隐藏效果
qinge_Crazy的博客
07-19 360
　　jQuery中用于控制元素显示和隐藏效果的方法如表1所示。 　　表1 控制元素的显示和隐藏 　　在表1中，参数speed表示动画的速度，可设置为动画时长的毫秒值(如1000)，或预定的3种速度(slow、fast和normal);参数easing表示切换效果，默认效果为swing，还可以使用linear效果;参数fn表示在动画完成时执行的函数。 　　下面通过代码演示show()、hide()和toggle()的简单使用。 　　<style> 　　div { width: 150p
JQuery 动画显示和隐藏效果
牵牛果手记
08-06 569
>   html xmlns="http://www.w3.org/1999/xhtml">   head>   meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   title>JQuery 动画显示和隐藏效果title>   script>       /*            1.$("页
【jQuery动画】显示与隐藏效果
m0_55394328的博客
10-03 2656
在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。jQuery中内置了一系列方法用于实现动画，当这些方法不能满足实际要求时，用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
Jquery动画之显示和隐藏(普通、滑动、淡入淡出)
qq_33088807的博客
12-30 677
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-jq动画</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <input type="button" id="b1" va.
jQuery的隐藏和显示动画效果 及 自定义动画
m0_58679504的博客
07-20 320
show()、hide()、toggle()、slideDown()、slideUp、slideToggle()、fadeIn()、fadeOut()、fadeTo()、fadeToggle()、animate()
jQuery动画实战：前端开发关键技巧-显示/隐藏、滑动与自定义
本文档深入探讨了jQuery在创建动态效果方面的核心功能，包括显示与隐藏、滑动效果、停止动画、淡入淡出以及自定义动画。 1. **显示与隐藏效果**：jQuery提供了一套简单易用的API来控制元素的可见性。例如，`fadeIn...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值