<!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效果的更多相关文章

  1. css3实现jQuery的slideUp和slideDown效果

    最近打算做一些交互优化方面的轮子.虽然轮子别人都弄过,但是自己没弄过.重复造轮子对知识理解还是有好处的.本次轮子如题目.直接代码. <!DOCTYPE html> <html lan ...

  2. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  3. jquery 之效果

    // jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...

  4. jQuery自学笔记（三）：jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  5. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  6. jQuery的效果(动画)

    jquery的效果(动画) show 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数:speed:三种预定速度之一的字符串('slow','normal','fast' ...

  7. jQuery的效果

    jQuery的效果也是极其强大的 学习方法的三要素   功能 参数 返回值 fadeout() 由可见过渡到隐藏 三个参数 第一个参数:毫秒(过渡的周期) 第二个参数:匀速(过渡的效果) 第三个参数: ...

  8. 【jQuery】 效果

    [jQuery] 效果 资料 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp 1. 显示隐藏 hide(); 隐藏 show(): 显 ...

  9. jQuery的效果函数

    jQuery的效果函数有很多,下面让我们一起看看jQuery的效果函数吧: jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除 ...

随机推荐

  1. CENTOS7.3 64位架设使用MYSQL数据库的ASP.NET CORE网站

    注:本人使用的是云服务器,具体CentOS怎么安装这里不作赘述. 网站架设效果可以查看https://www.resape.com 一.在CentOS上安装Dotnet Core环境 1.Add th ...

  2. shfileoperation 删除文件 FileDelete(CString strName)

    From:http://blog.csdn.net/lvwx369/article/details/41440883 注意:其中namePath 为全局变量 Cstring namePath; BOO ...

  3. HelloWorld 模块

    helloworld.c 代码 #include <linux/init.h> #include <linux/module.h> MODULE_LICENSE("D ...

  4. UltraEdit工具安装和注册机破解

    1.关闭网络连接(或者直接拔掉网线). 2.打开UltraEdit软件,稍等片刻会出现提示你你使用的是试用版本的窗口.如下图,点击“注册”. 3.填写许可证id和密码.许可证id可任意填写,不过根据经 ...

  5. ARP表 MAC表 路由表

    ARP表是一个动态表,存储在计算机当中,目的是做一个ip地址与mac地址的对应.假设在同一子网段,计算机A与计算机B通信计算机A的ip地址192.168.0.1 MAC地址AA-AA-AA-AA-AA ...

  6. Django工程目录结构优化

    1.我看到这篇文章,写的不错,在此复制了一份,防止以后找不到! 感谢作者的翻译--->原文的链接:http://www.loonapp.com/blog/11/ 如果原文存在,请打开原文件阅读 ...

  7. hdu 3625 Examining the Rooms——第一类斯特林数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=3625 n^2 求斯特林数就行.要减去的就是1号钥匙在1号房间的方案,即 s[ n-1 ][ m-1] . ...

  8. Jython引用Java类

    Ubuntu下如下指令安装Jython:$ sudo apt-get install jython下面的指令用于查看Jython版本:$ jython --version下面的代码是一个简单的Java ...

  9. CodeReview是开发中的重要一个环节，整理了一些关于jupiter for java

    什么是代码评审(CodeReview)? 代码评审也称代码复查,是指通过阅读代码来检查源代码与编码标准的符合性以及代码质量的活动. Jupiter提供了代码行级别的评审批注功能,方便评审参与人了解具体 ...

  10. yum安装报错“rpmts_HdrFromFdno: Header V3 DSA signature: NOKEY, key ID 1e5e0159”

    Do not forget to set gpgkey when installing the oracle-validated rpm Read more: http://oracletoday.b ...