51 jQuery-使用slideDown()与slideUp()方法实现滑动效果

1.效果图

2.HTML代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>51 jQuery-使用slideDown()与slideUp()方法实现滑动效果</title><style type="text/css">body{font-size:13px}.divFrame{width:86px;border:solid 1px #666}.divFrame .divTitle{padding:5px;background-color:#eee;cursor: pointer;}.divFrame .divContent{padding:8px;}.divFrame .divContent img{border:solid 1px #ccc;padding:2px;width: 60px;height: 60px;}</style>
</head>
<body><div class="divFrame"><div class="divTitle">隐藏图片</div><div class="divContent"><img src="../img/pig.jpg" alt=""/><div id="divTip"></div></div></div><script src="../jquery.min.js"></script>
<script type="text/javascript">$(function(){//初始化一个布尔变量值var blnShow = false;//定义变量获取标题部分var $Title = $(".divTitle");//定义变量获取提示元素var $Tip = $("#divTip");//点击标题部分事件$Title.click(function(){if (!blnShow) {//图片高度向上减小，执行完成后，回调一个函数$("img").slideUp(3000, function(){$Tip.html("关闭成功！")})//改变标题内容$(this).html("显示图片");//改变布尔变量值blnShow = true;}else {//清空提示内容$Tip.html("");//图片高度向下增大$("img").slideDown(3000);$(this).html("隐藏图片");blnShow = false;}})})
</script>
</body>
</html>

51 jQuery-使用slideDown()与slideUp()方法实现滑动效果相关推荐

JQuery： slideDown与slideUp
HZY SlideDown和slideUp是JQuery中的方法 SlideDown是通过高度变化(向下增大)来动态地显示所有匹配的元素 SlideDown有三个参数 speed:动画时长的毫秒数值 ...
slidedown和slideup 的重复滑动问题
在很多PC端网站上,会有鼠标滑过nav展示二级菜单的需求,这种情况用slidedown和slideup是比较符合的. 如果是点击事件的话,是比较简单的,但是在鼠标滑过的问题上,要稍微复杂一点. 在于m ...
模仿jQuery的slideDown、slideUp上下滑动，舒服！
效果图: 全部代码如下: <!DOCTYPE html> <html><head><meta http-equiv="Content-Type&qu ...
jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
jQuery 滑动方法可使元素上下滑动. jQuery slideDown() 方法用于向下滑动元素. $(selector).slideDown(speed,callback); 可 ...
jQuery 效果 - 滑动 slideDown，slideUp，slideToggle的使用
//slideDown() 方法用于向下滑动元素 $(document).ready(function(){$(".flip").click(function(){$(" ...
jQuery 效果 ——slideDown() 方法、slideToggle() 方法、slideUp() 方法
slideDown() 方法定义和用法 slideDown() 方法通过使用滑动效果,显示隐藏的被选元素. 语法 $(selector).slideDown(speed,callback) 参数描 ...
jQuery的滑动效果（slideDown()，slideUp（），slideToggle()）的应用方法
鼠标移入时内容向下滑出,鼠标移开时内容向上滑动隐藏的三种方法 slideDown():向下滑出直到全部显现: slideUp():向上滑走直到消失: slideToggle():向下和向上滑动两个动作 ...
jQuery之动画系列(show、hide、fadeIn、fadeOut、fadeToggle、fadeTo、slideDown、slideUp、slideToggle)
文章目录 show 和 hide fadeIn 和 fadeOut fadeToggle fadeTo slideDown 和 slideUp slideToggle show 和 hide < ...
原生JavaScript实现jQuery中的slideUp和slideDown滑动效果
参考文章:用原生JavaScript写出类似jQuery中slideUp和slideDown效果_johnworks的博客-CSDN博客作者:johnworks 目录一.前言二.第一次尝试 ...

51 jQuery-使用slideDown()与slideUp()方法实现滑动效果

1.效果图

2.HTML代码

51 jQuery-使用slideDown()与slideUp()方法实现滑动效果相关推荐

最新文章

热门文章