正文

jquery效果：隐藏显示切换滑动淡入淡出动画

怪咖咖  怪咖咖  2022-08-20  211

关键词：

jQuery效果
隐藏、显示、切换、滑动、淡入淡出、以及动画

1、隐藏与显示(改变：display：none;)
hide()——隐藏
show()——显示

toggle()方法：可以使用它来切换hide()与show()方法
eg1：显示
<style type="text/css">
*{margin:0;padding:0;}
.body{font-size:12px;font-family:"微软雅黑";color:#666;}
.yym{width:100px;height:100px;background:red;text-align:center;line-height:100px;border-radius:50px;color:#fff;display:none;}
</style>
</head>
<body>
<div class="yym">世界那么大</div>
<input type="button" value="点击显示HTML元素" id="show_btn" />
<input type="button" value="点击显示HTML元素并执行回调函数" id="show_btn1" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮让class=yym的文本显示出来
$("#show_btn").click(function(){
//slow默认值==600毫秒，1秒=1000毫秒;fast==200毫秒
$(".yym").show("slow");
});
//用1000毫秒把.yym显示出来，并且将文本替换成新的内容
$("#show_btn1").click(function(){
$(".yym").show(1000,function(){
$(this).text("我想去看看");
});
});
});
</script>
eg2：隐藏
<body>
<p>黄河是中国的第二大河流</p>
<input type="button" value="点击隐藏文本" id="yym_hide"/>
<input type="button" value="点击缓慢隐藏文本" id="yym_hide1" />
<input type="button" value="缓慢隐藏文本并回调函数" id="yym_hide2" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮隐藏P标签
$("#yym_hide").click(function(){
$("p").hide();
});
//点击按钮缓慢隐藏P标签
$("#yym_hide1").click(function(){
$("p").hide(2000);
});
//点击元素
$("#yym_hide2").click(function(){
//隐藏p标签，function（回调函数）
$("p").hide(1000,function(){
$("body").text("黄河之母亲河");//文本隐藏后，若要让文本改变，则用body
});
});
});
</script>

eg3：toggle()——点击按钮隐藏，再点击又显示
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:green;}
</style>
</head>
<body>
<div class="yym"></div>
<input type="button" value="toggle函数" id="yym_toggle" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮隐藏，再点击又显示
$("#yym_toggle").click(function(){
});
});
</script>

eg3.1:
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:green;}
</style>
</head>
<body>
<div class="yym"></div>
<input type="button" value="toggle函数" id="yym_toggle" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮隐藏，再点击又显示
$("#yym_toggle").click(function(){
$(".yym").toggle(2000,function(){
$("body").html("<img src=‘http://p1.qhimg.com/dmt/528_351_/t012ffcdd03db3d42f6.jpg‘ alt=‘美女‘ width=‘500‘ height=‘300‘>")
});
});
});
</script>

2、淡入淡出(改变：宽度、高度、透明度<opacity>)
通过jQuery，可以实现元素的淡入淡出效果(改变opacity透明度)
jQuery拥有以下四种方法：
fadeIn()用于淡入已隐藏的元素
fadeOut()方法用于淡出可见元素
fadeToggle()该方法可以在fadeInt()与fadeOut()方法之间进行切换
如果元素已淡出，则fadeToggle()会向元素添加淡入效果
如果元素已淡入，则fadeToggle()会向元素添加淡出效果

jQuery fadeTo()方法
jQuery fadeTo()方法允许渐变为给定的不透明（值介于0与1之间）
eg:fadeIn()淡入元素  fadeOut淡出元素 fadeToggle()切换  fadeTo透明度
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:red;display:none;}
</style>
</head>
<body>
<input type="button" value="我是一个fadeIn方法" id="yym_fadeIn">
<input type="button" value="我是一个fadeOut方法" id="yym_fadeOut">
<input type="button" value="fadeToggle方法" id="yym_fadeToggle" />
<input type="button" value="fadeTo透明度" id="yym_fadeTo" />
<div class="yym"></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//fadeIn淡入
$("#yym_fadeIn").click(function(){
$(".yym").fadeIn(2000);
});
//fadeOut淡出
$("#yym_fadeOut").click(function(){
$(".yym").fadeOut(2000);
});
//fadeToggle 隐藏与显示的切换
$("#yym_fadeToggle").click(function(){
$(".yym").fadeToggle();
});
//fadeTo渐变为给定的不透明度（值介于0到1之间）
$("#yym_fadeTo").click(function(){
$(".yym").fadeTo(2000,0.5,function(){//表示2秒钟变成半透明度，所有例子中function都是可加可不加，加是另外改变什么
alert("太帅了");
});
});
});
</script>
</body>

3、滑动(改变：高度)
jQuery滑动方法可使元素上下滑动（主要是改变高度）
通过jQuery，可以在元素上创建滑动效果
jQuery有以下滑动方法：
slideDown()用于向下滑动元素
slideUp()用于向上滑动元素
slideToggle()方法可以在slideDown()和slideUp方法之间进行切换
如果元素向下滑动，则slideToggle()可向上滑动
如果元素向上滑动，则slideToggle()可向下滑动
eg：
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:red;display:none}
</style>
</head>
<body>
<input type="button" value="向下滑动" id="yym_slideDown" />
<input type="button" value="向上滑动" id="yym_slideUp" />
<input type="button" value="上下滑动切换" id="yym_slideToggle" />
<div class="yym"></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//slideDown向下滑动
$("#yym_slideDown").click(function(){
$(".yym").slideDown(2000);
});
//slideUp向上滑动
$("#yym_slideUp").click(function(){
$(".yym").slideUp(4000);
});
//slideToggle上下滑动切换
$("#yym_slideToggle").click(function(){
$(".yym").slideToggle(2000);
});
});
</script>

4、 1）动画
jQuery animate()方法允许创建自定义的动画
jQuery动画——animate()方法

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

2）停止动画
jQuery stop()方法用于在动画或效果完成前对他们进行停止

jQuery stop()方法
jQuery stop()方法用于停止动画或效果，在他们完成之前
stop()方法适用于所有jQuery效果函数，淡入淡出和自定义动画

eg：
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:red;position:absolute;left:0;top:30px;}
</style>
</head>
<body>
<input type="button" value="点击我放大" id="yym_animate" />
<input type="button" value="点击我停止" id="yym_stop" />
<div class="yym"></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//使原背景图片动起来
$("#yym_animate").click(function(){
$(".yym").animate({
width:"500px",
height:"500px",
//移动时必须要position定位
left:"200px",//向右移动
top:"200px"//向下移动
},2000,function(){//不写时间也可以的
alert(0);
});
});
//使原本动起来的背景图片停下来
$("#yym_stop").click(function(){
$(".yym").stop();
});
});
</script>
</body>

jquery动画（显示隐藏，淡入淡出，滑动）

目录分类基本动画函数显示元素交替显示隐藏滑动效果向上收缩效果向下展开效果交替伸缩样式淡入淡出效果淡入效果淡出效果自定义不透明度jQuery的动画函数分类基本动画函数：既有透明度渐变，又有滑动效果。是最... 查看详情

jquery--基础动画滑动动画淡入淡出动画自定义动画

1/**2*【JQ基础动画】3*show()显示4*hide()隐藏5*toggle()切换6*默认无动画，如果要产生动画7*在括号内，添加毫秒数，可产生动画和控制动画的快慢8*9*《滑动动画》10*slideDown()滑动显示(下)11*slideUp()滑动隐藏(上)12*slideToggle滑动切换13*默... 查看详情

jquery效果-显示和隐藏淡入淡出滑动隐藏

jQuery效果-隐藏和显示:hide()和show()规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒您可以使用toggle()方法来切换hide()和show()方法。parents找到每个span元素的所有祖先元素。$("span").parents()找到每个span的所有是p元素的祖先... 查看详情

jquery效果之隐藏与显示淡入淡出滑动回调

隐藏与显示淡入淡出滑动效果查看详情

jquery效果

jQuery效果（一）隐藏和显示隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！点击消失结果为：() 查看详情

jquery基础（动画篇animate，显示隐藏，淡入淡出，下拉切换）

1.jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hi... 查看详情

jquery显示和隐藏以及淡出淡入效果

jQuery实现动画效果？1)显示和隐藏show()：显示hide()：隐藏togger()：显示和隐藏的组合1234<scripttype="text/javascript">$(function()$("tr:even").css("background-color","gray").eq(1).css("background-color","red");//设置tr的偶数的背景查看详情

jquery动画效果

过程分析今天我们来讲jQuery动画效果，就是使其运动起来。首先jQuery效果-隐藏和显示，隐藏、显示、切换，滑动，淡入淡出，以及动画。jQueryhide()和show()通过jQuery，您可以使用hide()和show()方法来隐藏和显... 查看详情

jquery效果有哪些

jqeury的效果有隐藏显示、淡入淡出、滑动、动画、停止动画，还可以把方法和动作链接起来。下面我来说一下它们的用法和需要的参数。 1.隐藏/显示　　hide()可以使元素隐藏。语法是：　$(selector).hide(speed,callback);　　　... 查看详情

jquery知识点

1、jQuery效果　　hide()隐藏　　show（）显示　　toggle（）切换显示隐藏　　　　语法（speed，callback）　　speed规定隐藏显示的速度slowfast还有毫秒（2000） callback回调函数执行完之后再执行函数　　fadeIn（）淡入　　fadeOut... 查看详情

前端基础六之jquery效果(代码片段)

文章目录题外话前言一.jQuery效果1.jQuery隐藏/显示2.jQuery淡入淡出3.滑动4.动画结语题外话📢博客主页：❤布小禅❤📢作者专栏：❤Python❤❤Java❤前言身为一个合格的后端开发人员前端的基础知识也是需要了解的一... 查看详情

前端基础六之jquery效果(代码片段)

js动画效果代码方法

...eln()与fadeOut();这两个方法，实现了淡入和淡出的一个动画效果，fadeln（）渐显效果，fadeout（）渐隐效果，两者结合使用，可把元素隐藏在按钮中，在通过点击事件显示，两方法只改变元素的透明度，不修改其他属性3.fadeToggle();... 查看详情

jquery之动画操作篇

1.隐藏/显示（操作的是displagcss属性）hide()show()toggle()(显示和隐藏切换)2.上卷/下拉（设置的位置的heightcss属性）slideDown()slideUp()slideToggel()(上卷和下拉切换)3.淡入/淡出（设置的是opacitycss属性）fadeOut()fadeIn()fadeToggle()(淡入淡出的切... 查看详情

jquery动画

.fadeOut()淡出动画、.fadeIn()淡入动画、.fadeToggle()淡入淡出切换和淡入效果.fadeTo()1 .fadeOut()淡出动画,淡出效果，内容隐藏，opacity是1到02 常见让元素在页面中不可见的方法有通过设置样式的display:none&nb... 查看详情

jq简单动画显示隐藏效果

一、概括jq的显示隐藏动画总共有：普通显示隐藏效果主要用了hide、show、toggle淡入淡出主要用到了fadeIn、fadeOut、fadeToggle滑动效果主要用了slideDown、slideUp、slideToggle其中各效果用到的toggle都是其他两个属性的切换二、实例普通显... 查看详情

第11章动画效果

学习要点：1.显示、隐藏2.滑动、卷动3.淡入、淡出4.自定义动画5.列队动画方法6.动画相关方法7.动画全局属性一．显示、隐藏jQuery中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显示内容和隐藏内容。$(... 查看详情

jquery中的dom动画

无动画效果的隐藏与显示hide()：在HTML文档中，为一个元素调用hide()方法会将该元素的display样式改为none。代码功能同css(“display”,“none”)相同。show()：将元素的display样式改为先前的显示状态。toggle()：切换元素的可见状态：如... 查看详情