JQuery的一些特效

最新推荐文章于 2022-06-17 15:24:13 发布
最新推荐文章于 2022-06-17 15:24:13 发布
阅读量157 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38437243/article/details/75075915
版权
1、淡入、淡出
fadeIn、fadeOut、fadeToggle、fadeTo
fadeIn是设置动画的淡入，fadeOut是设置动画的淡出，fadeToggle是设置动画淡入淡出之间的切换，fadeTo是设置淡入淡出的程度。
特效一：淡入
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<style type="text/css">
#div1{
width:80px;
height:80px;
display:none;
background-color:red;
}
#div2{
width:80px;
height:80px;
display:none;
background-color:green;
}
#div3{
width:80px;
height:80px;
display:none;
background-color:blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
alert("ss");
$(":input").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>点击按钮实现淡入淡出</p>
<input id="btn" type="button" value="点击我"/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
特效二：淡出
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<style type="text/css">
#div1{
width:80px;
height:80px;
display:none;
background-color:red;
}
#div2{
width:80px;
height:80px;
display:none;
background-color:green;
}
#div3{
width:80px;
height:80px;
display:none;
background-color:blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
alert("ss");
$(":input").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>点击按钮实现淡入淡出</p>
<input id="btn" type="button" value="点击我"/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
特效三：淡入和淡出的切换
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<style type="text/css">
#div1{
width:80px;
height:80px;
display:none;
background-color:red;
}
#div2{
width:80px;
height:80px;
display:none;
background-color:green;
}
#div3{
width:80px;
height:80px;
display:none;
background-color:blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
alert("ss");
$(":input").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>点击按钮实现淡入淡出</p>
<input id="btn" type="button" value="点击我"/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
2、滑动效果
特效一：向下滑动
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.info,p.show{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.info{
height:80px;
display:none;
}
a{
text-decoration:none;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
$(".show").click(function(){
$(".info").slideDown("slow");
});
});
</script>
</head>
<body>
<div class="info">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="show"><a href="#">请点击这里</a></p>
</body>
</html>
特效二：向上滑动
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.info,p.show{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.info{
height:80px;
display:none;
}
a{
text-decoration:none;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
$(".show").click(function(){
$(".info").slideUp("slow");
});
});
</script>
</head>
<body>
<div class="info">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="show"><a href="#">请点击这里</a></p>
</body>
</html>
特效三：滑动方向的切换
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.info,p.show{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.info{
height:80px;
display:none;
}
a{
text-decoration:none;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
$(".show").click(function(){
$(".info").slideToggle("slow");
});
});
</script>
</head>
<body>
<div class="info">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="show"><a href="#">请点击这里</a></p>
</body>
</html>
weixin_38437243
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery特效
muweichang的博客
09-08 563
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：实例。 隐藏和显示 jQuery hide() 和 show() 效果 - 淡入淡出 效果 - 滑动 效果 - 动画 jQuery stop() 方法 jQuery Chaining
jQuery动画特效
m0_51281306的博客
03-24 1998
1.1基本动画 hide():隐藏HTML元素 show():显示HTML元素 toggle():show()和Hide()的切换。 语法 $(selector).show(speed,easing,callback) speed 可选。规定显示效果的速度。 可能的值：毫秒 "slow" "fast" easing 可选。规定在动画的不同点上元素的速度。 默认值为 "swing"。 可能的值： "swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动 c
六、jQuery动画特效（一）
m0_61684063的博客
04-16 2933
jQuery动画特效jQuery动画特效1.显示和隐藏2.淡入与淡出3.向上或向下滑动往期回顾 jQuery动画特效 1.显示和隐藏   在 JavaScript 中，如果需要显示或隐藏网页上的一个元素，可以设置该元素的display属性值为“inline/none”。如果在jQuery中完成类似功能，可以使用jQuery提供的show()方法显示，使用hide()方法进行隐藏。其语法格式如下所示： $("选择器").hide(speed,callback) $("选择器").show(speed,c
jQuery一些特效插件收集
Lucky Star的博客
02-08 585
具体来自：http://www.zhangxinxu.com/wordpress/2009/08/jquery-很酷的弹出层效果js插件/
JQuery UI 特效学习
dandingwangzi的专栏
06-17 427
JQuery UI 特效学习笔记
jQuery实现图标特效
小白小白从不日别的博客
11-10 389
<script src="js/jquery-1.8.3.js"></script> * { margin: 0; padding: 0; } ul { list-style: none; width: 300px; height: 100px; border:...
七、jQuery动画特效（二）
m0_61684063的博客
04-17 950
七、jQuery动画特效（二）
超全jquery网页特效素材网站整理
m0_66323106的博客
01-24 1796
天天各大网站找jquery网页特效素材？最后空手而归？今天为大家推荐jquery网页特效素材网站，质量上乘适合资源慌缺的你，话不多说准备开始收藏吧！ 免费资源最多，又全面的网站，我找到啦！！它有很多素材，成品类的，元素类的，应有尽有。我刚找到这个网站的时候真的非常惊喜，非常良心的网站。 为大家整理了网页特效-jquery网页特效合集 为了方便大家更快的找到资源，小编给大家指引路线： 进入网站后-点击-平面-资源库-网页特效栏目，然后再点击jquery分类，这样就能找到啦！ 下面给大家展现几个看
jquery数字滚动特效
sunsineq的专栏
01-29 640
数字滚动效果 1.需要引用jquery.js 2.需要引用jquery.numscroll.js <!--默认写法--> <p class="num">100</p> <p class="num"><span>100</span></p> <!--推荐写法--> <p class="num2" data-num="888888"></p> <script src="j..
jQuery 事件&动画特效
qq_62331938的博客
03-20 943
前言 上次九歌分享了jQuery的筛选和事件处理，这次来分享jQuery的事件和动画效果。 以下是本篇文章正文内容，下面案例可供参考 一、事件 1.加载Dom两种方式 （1）window.onload方式 （2）jQuery方式 //js window.onload = function(){ console.info("js方式"); } //jQUery $(function(){ console.info("jQuery方...
JQuery一些特效
04-04
JQuery是一种广泛应用于Web开发的JavaScript库，以其简洁的API和强大的功能著称。...在"JQuery一些特效"这个主题中，我们将深入探讨JQuery在实现...熟练掌握JQuery特效的运用，将极大地提升Web应用的用户体验和开发效率。
jQuery文字显示特效
06-01
标签“js特效”和“jQuery特效”暗示了这些特效是通过JavaScript语言和jQuery库实现的。JavaScript是一种在客户端运行的脚本语言，它可以修改DOM（文档对象模型），进而改变网页内容和样式。jQuery库简化了...
Jquery特效
03-28
**jQuery特效概述** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，特别是对于网页动态效果和交互。jQuery的出现使得开发者可以快速、高效地实现各种复杂的网页特效，无需深入理解底层...
jQuery旋转木马特效
06-10
以下是jQuery旋转木马特效的一些关键知识点： 1. **CSS3 3D转换**：CSS3中的transform属性允许我们对元素进行2D和3D变换，如旋转、平移、缩放等。在旋转木马特效中，3D旋转是关键，它可以创建出立体的视觉效果，使...
jquery滚动特效代码
01-23
在网页模板中，我们可以预设一些滚动特效，如背景图片淡入淡出、侧边栏随着滚动浮动、内容块的滑入滑出等。这不仅能够使模板更生动，还能帮助用户更好地导航和理解页面内容。 为了实现这些特效，你需要对HTML结构...
push方法总结
热门推荐
蕉下客
07-13 1万+
jQuery中push方法表示向数组后添加元素，仅限于数组，这点和append和after是根本区别，pop表示从数组中取出最后一个元素。push返回添加之后的数组长度，而pop返回的是数组的最后一个元素。 ss var arr = []; arr.push("tom"); arr.push("jack"); document.write(arr);          
jquery验证两次密码是否一致并阻止表单提交
蕉下客
07-13 1万+
1、jQuery代码$(function(){        $("#sub").click(function(){        var pwd = $("input[name='uPwd']").val();    var cpwd = $("input[name='uPwd2']").val();    if(pwd != cpwd){    alert(
jquery中join（）方法总结
蕉下客
07-13 7847
join方法用于数组中元素的连接下面首先以一个简单的例子举例说明：var arr = [1,2,3,4,5];document.write(arr.join(-));  //输出结果：1-2-3-4-5var arr = [1,2,3,4,5];document.write(arr.join());   //    1,2,3,4,5下面再说一下比较复杂的例子： ss $(docu
JQuery实现动态数据二级联动
蕉下客
07-13 5871
写此博客原因：项目中需要二级联动，点击一级学科，联动到二级学科，上网查了资料，都写的是从前台获取，很不满意，决定自己写一个二级联动！JQuery：$(function() { //ajax实现二级联动 $.post("${basePath}field/getjson.action",function(data){ if(data){ var field = ""; for(var i=0
全面解析：jQuery特效大全
以下是标题和描述中提到的一些jQuery特效的详细说明： 1. 导航类特效： - **Horizontal Accordion**：这种特效允许在一个有限的空间里展开和折叠多个内容区域，横向展示，节省空间。 - **jQuery-Horizontal ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值