jQuery效果

已于 2022-09-20 09:38:17 修改
阅读量96 收藏
点赞数
分类专栏： jQuery 文章标签： jquery javascript 前端
于 2022-08-25 10:10:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44399428/article/details/126487354
版权

1.隐藏/显示

jQuery hide() 和 show()

<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
//当点击id为hide的按钮元素时，隐藏文本元素p
  $("#hide").click(function(){
    $("p").hide();
  });
//当点击id为show的按钮元素时，显示文本元素p
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
//HTML主体
<body>
<p>隐藏与显示</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

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

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

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

$(selector).show(speed,callback); 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
/* div样式 */
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<!-- 功能代码段 -->
<script>
$(document).ready(function(){
    //点击类名为hidebtn的元素
  $(".hidebtn").click(function(){
    //隐藏div元素，为其设置参数和函数
    $("div").hide(1000,"linear",
    //函数，弹窗提示，下类似
    function(){
      alert("Hide()方法已完成!");
    }
    );
  });
  $(".hidebtn1").click(function(){
    $("div").show(1000,"linear",
    function(){
      alert("Show()方法已完成!");
    }
    );
  });
});
</script>
</head>
<body>
<!-- div元素 -->
<div>111111111111</div>
<!-- 两个按钮，类名不同 -->
<button class="hidebtn">隐藏</button>
<button class="hidebtn1">显示</button>
</body>
</html>

toggle()方法集成hide()和show()方法：显示被隐藏的元素，并隐藏被显示的元素。

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

2.淡入淡出

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

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

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

//写法
$(selector).fadeIn(speed,callback);
//实例
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

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

//写法
$(selector).fadeOut(speed,callback);
//实例
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle() 方法集成 fadeIn() 与 fadeOut() 方法，他们之间进行相互切换。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>111111</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
//javascript代码块
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});
</script>
</head>
<body>

<p>演示了不同参数</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>

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

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

3.滑动

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
//代码段，点击id为flip的元素，会下滑出id为panel的元素
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
//css样式
<style type="text/css"> 
//id的样式
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
//隐藏id为panel的元素
	display:none;
}
</style>
</head>

<body>
<div id="flip">点我滑下</div>
<div id="panel">Hello world!</div>
</body>
</html>

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

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

 slideToggle() 方法集成slideDown()与slideUp() 方法。

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

4.动画

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

//左移250像素
$("button").click(function(){
  $("div").animate({left:'250px'});
});

animate() - 操作多个属性。

$("button").click(function(){
  $("div").animate({
    left:'250px',
    //颜色的深浅
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

animate() - 使用相对值

定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    //相对于目前位置右移150元素
    height:'+=150px',
    //相对于目前位置左移150元素
    width:'+=150px'
  });
});

animate() - 使用预定义的值

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

$("button").click(function(){
  $("div").animate({
    //高度参数，可显示和隐藏，另外可用show hide
    height:'toggle'
  });
});

animate() - 使用队列功能

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

$("button").click(function(){
  //定义一个div
  var div=$("div");
  //操作div，左移100像素
  div.animate({left:'100px'},"slow");
  //字体变为3em
  div.animate({fontSize:'3em'},"slow");
});

5.停止动画

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

适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  //点击id为flip的元素
  $("#flip").click(function(){
  //id为panel的元素向下滑动5秒
    $("#panel").slideDown(5000);
  });
//点击id为stop的元素
  $("#stop").click(function(){
//点击id为panel的元素
    $("#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
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

6.Callback

Callback 函数在当前动画 100% 完成之后执行。

//使用callback回调
//在元素p隐藏后出现弹窗
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});
//不使用callback回调
//在弹窗结束后隐藏p
$("button").click(function(){
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});

7.链(Chaining)

允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

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

复制粘贴机QAQ
关注
专栏目录
jQuery.动态效果的实现+跟着敲系列（十五）
Miracle1203的博客
05-31 4337
文章目录1.隐藏和显示hide() 和 show() 方法可选的 speed 参数规定隐藏/显示的速度使用回調函數jQuery toggle()可选的 callback 参数说明2.淡入淡出jQuery fadeIn() 方法jQuery fadeOut() 方法 1.隐藏和显示 hide() 和 show() 方法 隐藏和显示 HTML 元素 $(selector).hide(speed,callback); $(selector).show(speed,callback); <!DOCTYPE
Jquery 效果综合案例效果
qq_56248592的博客
11-10 1021
我要实现上面的效果思考代码如何编译 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--导入jquery文件--> <script src="jquery-3.6.js"></script> <title&gt...
Jq数据列表动态效果
07-21
Jq数据列表动态效果，动态更新，支持Ajax动态刷新。
jQuery 动态云标签插件
12-10
前言： 　　最近对js的插件封装特别感兴趣，无耐就目前的技术想做到js的完全封装，还是有一定困难，就基于jQuery封装了一个小的插件，而且是基于对象级开发的，不是添加全局方法。高深的语法几乎没有，就有一个return：foreach()方法来返回对象实例本身，还有一个extend（）函数，用来扩展参数对象的属性，这也是为了对象在调完我这个方法后方便链式操作。 　　插件打包下载地址：点我下载 插件名：动态云标签 插件特点： 在指定块级元素内动态生成a标签 a标签的高度、宽度、位置、层数、背景颜色随机可控 a标签渐隐显示和渐隐消失，可改变初始化的透明度 a标签创建的速度和移动速度可控（计时器）
jq实现吸附效果
ahukmq23090的博客
03-14 223
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .top{ width...
jquery 鼠标悬停跟随动态效果
11-16
jquery的鼠标悬停后显示动态菜单或者列表的方法，采用jquery动态显示和隐藏，实现像京东商城产品分类列表动态显示的效果，需要自己引入jquery包哦
前端必知必会-jQuery 效果-滑动和动画
qq_24018193的博客
09-24 1558
您甚至可以将属性的动画值指定为“show”、“hide”或“toggle”：示例});});本文介绍了jQuery 效果-滑动和动画的使用，如有问题欢迎私信和评论。
jQuery 动画效果
qq_49900295的博客
04-01 2765
目录 1.常见的动画效果 2.显示隐藏效果 显示语法规范： 显示参数： 隐藏语法规范： 隐藏参数： 3.滑动效果 停止排队： 4.自定义动画animate 参数： 小案例 1.常见的动画效果 jQuery给我们封装了很多动画效果,最为常见的如下: 显示隐藏 show() hide() toggle() 滑动 slideDown() slideUp() slideToggle() 淡入淡出 fadeIn() fadeOu...
jQuery效果（隐藏和显示）
shao_xuan_的博客
01-05 7744
jQuery效果解析隐藏和显示hide()和show()jQuery toggle()淡入淡出jQuery fadeIn() 方法jQuery fadeOut() 方法jQuery fadeToggle() 方法jQuery fadeTo() 方法滑动jQuery slideDown() 方法jQuery slideUp() 方法jQuery slideToggle() 方法自定义动画jQuery animate() 方法停止动画jQuery stop() 方法 隐藏和显示 hide()和show() hi
jquery 效果
03-31
**jQuery 效果详解** jQuery 是一个广泛应用于前端开发的 JavaScript 库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在本文中，我们将深入探讨jQuery中的效果部分，包括如何实现基本的...
jquery效果事件
07-23
《jQuery效果与事件详解》 在网页开发中，jQuery库以其简洁、强大的API深受开发者喜爱。本文将深入探讨jQuery中的效果与事件，帮助你更好地理解和运用这一强大的工具。 一、jQuery简介 jQuery是由John Resig在...
jQuery网页向下滚动数字增加动画特效
06-10
jQuery网页向下滚动数字增加动画特效是一款鼠标滚轮滚动网页页面jQuery滚动事件代码。
jQuery响应式粘性滑块导航特效
07-24
jQuery响应式粘性滑块导航特效是一款基于jQuery+CSS3制作的网页顶部固定的粘性滑动导航栏，点击导航标签，页面滚动到相应的标签内容位置效果。
有关几个常见的jquery效果
03-16
标题中的“有关几个常见的jquery效果”意味着我们将探讨jQuery库中的一些流行效果，这些效果用于增强网页的用户体验。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，使得网页开发...
jquery粘贴按钮_jquery实现复制的两种方式
weixin_34162851的博客
01-17 3499
---恢复内容开始---jquery两种复制元素的方式：1.$("seletor").clone(param1,param2)有两个可选参数(布尔类型)，默认都是false。param1代表是否复制事件。param2代表是否对事件处理程序和克隆的元素的所有子元素的数据进行复制Html代码：jQuery代码:$("b").clone().prependTo("p");结果:HelloHello, ...
jQuery实现点击复制效果
weixin_30390075的博客
03-13 1806
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>target-input</title> <meta name="viewport" content="width=device-width, initial-scale=1...
jq中导航吸顶,点击导航滚动对应位置并跟随联动效果
npm_run_dev的博客
09-30 378
刚开始从网上找代码,找了一圈之后发现,别人的定位都不够准确,不然就是不符合自己的要求,于是自己写了这个代码,希望能和大家共同进步,如果有不足的请指出来 页面布局 <div class="banner"> <p>2</p> <p>2</p> <p>2</p> <p>2</p> </div> <div id
用jquery实现页面滚动时展现动感的元素效果（有插件可实现！）
LeeNingfeng的博客
01-16 1183
1.用jquery + animate.css实现 functionanimate(){ vara=$(".main-service").offset().top;//元素到浏览器顶部的距离 if(a>=$(window).scrollTop()&&a<($(window).scrollTop()+...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
最新发布
zhzijun的博客
11-13 414
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
jQuery效果实践：条纹、焦点与显示隐藏
这篇笔记主要介绍了在工作中经常使用的jQuery效果，旨在提高开发效率，避免重复编写相同代码。首先，笔记讲解了如何实现条纹效果以及在表格行上的焦点切换和鼠标事件处理。 1. 条纹效果与焦点、鼠标事件处理 为了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值