jquery slideDown效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.parent {background-color:red;width:200px;height:150px;position: absolute;overflow: hidden;}
.son{ border: 4px greenyellow solid; background: #a9ea00;width:100px;height:140px;top:-148px;position: relative;}
.JQson{ border: 4px greenyellow solid; background: #a9ea00;width:100px;height:140px;display:none;position: relative;}
</style>
<script src="http://common.cnblogs.com/script/jquery.js"></script>
<script>
$(function() {
$("#mySlideDown").click(function() {
var son = $(".son")
son.css("top", -1 * son.outerHeight())
$(".son").animate({top: 0}, 1000)
})
$("#jQslideDown").click(function() {
// alert( $(".JQson")[0])
// $(".JQson").height(0)
$(".JQson").slideDown(1000)
})
})
</script>
</head>
<body>
<table>
<tr>
<td width="300">
<button id="mySlideDown" type="button">我的slideDown</button>
<div class="parent">
<div class="son">
<div>1111111</div>
<div>2222222</div>
<div>3333333</div>
<div>4444444</div>
<div>5555555</div>
<div>6666666</div>
<div>7777777</div>
</div>
</div>
</td>
<td width="300">
<button type="button"id="jQslideDown">jQslideDown</button>
<div class="JQson">
<div>1111111</div>
<div>2222222</div>
<div>3333333</div>
<div>4444444</div>
<div>5555555</div>
<div>6666666</div>
<div>7777777</div>
</div>
</td>
</tr>
</table>
</body>
</html>
运行代码
点击运行可以看到效果,JQ自带的有副作用,影响到原有布局,是能过改变自身的高度实现,如果它里面的内容是用SPAN等堆砌的,它们会挤在一起,然后慢慢变成你想要的样子。
我的是通过两个元素实现的,外围与内部的等高,外围的要求overflow:hidden,防止内部的要一开始放到上方时被暴露出来。然后慢慢改变top,与现实中的窗帘降下效果一致。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#hide{
overflow: hidden;
width:200px;
height:0px;
position:relative;
border:1px solid red;
}
#show{
position: absolute;
left:0px;
background: green;
padding:0px;
margin:0px;
top:-200px;
height: 100px;
width:200px;
}
#content{
width:200px;
height:200px;
background: #a9ea00;
}
</style>
<script src="http://common.cnblogs.com/script/jquery.js"></script>
<script>
$(function() {
$("button").click(function() {
var hide = $("#hide")
if (hide.height()) {
hide.css("overflow", "hidden")
hide.animate({
height: 0
}, 1000)
$("#show").animate({
top: -200
}, 1000)
} else {
hide.animate({
height: 200
}, 1000, function() {
$(this).css("overflow", "visible")
})
$("#show").animate({
top: 0
}, 1000)
}
})
})
</script>
</head>
<body>
<div id="hide">
<div id="show">
<div id="content">
<div>111111111</div>
<div>22222222</div>
<div>333333333</div>
<div>44444444444</div>
<div>555555555</div>
</div>
</div>
</div>
<button type="button">toggle</button>
</body>
</html>
运行代码
jquery slideDown效果的更多相关文章
- css3实现jQuery的slideUp和slideDown效果
最近打算做一些交互优化方面的轮子.虽然轮子别人都弄过,但是自己没弄过.重复造轮子对知识理解还是有好处的.本次轮子如题目.直接代码. <!DOCTYPE html> <html lan ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- jquery 之效果
// jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...
- jQuery自学笔记(三):jQuery动画效果
jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery的效果(动画)
jquery的效果(动画) show 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数:speed:三种预定速度之一的字符串('slow','normal','fast' ...
- jQuery的效果
jQuery的效果也是极其强大的 学习方法的三要素 功能 参数 返回值 fadeout() 由可见过渡到隐藏 三个参数 第一个参数:毫秒(过渡的周期) 第二个参数:匀速(过渡的效果) 第三个参数: ...
- 【jQuery】 效果
[jQuery] 效果 资料 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp 1. 显示隐藏 hide(); 隐藏 show(): 显 ...
- jQuery的效果函数
jQuery的效果函数有很多,下面让我们一起看看jQuery的效果函数吧: jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除 ...
随机推荐
- 四则运算生成与校检 Python实现
GitHub地址 https://github.com/little-petrol/Arithmetic.git 合作者: 郭旭 和 卢明凯 设计实现过程 代码的组织主要分为两个部分: 算法与结构体的 ...
- findContours()的使用崩溃问题
之前用的好好的,不知咱弄得就突然崩溃.然后网上搜了半天. 各种试,不行. 有一种改变代码方式的做法,可行,但是心里用着很是不爽.vector<vector<Point>>con ...
- GitLab non-standard SSH port
/***************************************************************************** * GitLab non-standard ...
- (效果一)js实现上拉加载
实现思路:获取滚动元素的高度,滚动条距离顶部的距离,滚动条的高度, 算式:可视窗口的高度 + 滚动条距离顶部的距离 == 滚动条的高度就说明到底部. HTML <!doctype html> ...
- 关于for循环中是否需要缓存length值的个人总结
在JS性能优化中,有一个常见的小优化,即 // 不缓存 for (var i = 0; i < arr.length; i++) { ... } // 缓存 var len = arr.leng ...
- JFinal自定义FreeMarker标签
为什么采用freemarker? 1.模板技术,不依附于语言和框架,前端和后端解耦,便于分工协作,更好的协同. 2.页面相应速度快 3.前端非常的灵活,采用自定义标签可以在不更改后端的基础上很容易的构 ...
- 剑指Offer面试题:8.二进制中1的个数
一 题目:二进制中1的个数 题目:请实现一个整数,输出该数二进制表示中1的个数.例如把9表示成二进制是1001,有2位是1.因此如果输入9,该函数输出2. 二 可能引起死循环的解法 // 计算整数的二 ...
- Microsoft office2007免费版下载(安装 + 破解)
office2007官方下载 免费完整版是微软推出的办公软件,office2007使用方法很简单,解压软件之后,运行“setup.exe”之后按照提示点击下一步,输入产品秘钥,就可以正常安装了.Mic ...
- niosii dma实验中的一点感想
1,使用nios给出的驱动函数的顺序一般为1,清中断2,写控制寄存器,3,写参数寄存器4,中断注册,5,开始工作.因为开始工作控制位在控制寄存器中,所以会想到到最后一块写,省事,但是在dma试验中发现 ...
- Google搜索被屏蔽,如何使用Google搜索
我们在国内使用搜索引擎最多的是Google和Baidu啦,在引擎上找一些我们需要的知识,最近好像www.google.cn已经无法访问了,并且香港的链接www.google.com.hk也无法访问了, ...