JQuery实现DIV的显示与隐藏

来源：互联网发布：淘宝爱护佳腰带编辑：程序博客网时间：2024/04/29 14:56

1.动画

animate

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script><script type="text/javascript">$(function(){$("#div1").animate({height:"500px",width:"500px"},4000);// JQuery链式操作//$("#div1").animate({height:"500px"},2000).animate({width:"500px"},2000);});</script><style type="text/css">#div1{width:100px;height:100px;background-color:red;border:1px black solid;}</style></head><body><div id="div1"></div></body></html>

2.隐藏与显示

显示：show() 隐藏: hide()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script><script type="text/javascript">$(function(){$("#btn").click(function(){if($("#div1").css("display")=="none"){$("#info").html("正在显示...");$("#div1").show(2000,function(){$("#info").html("显示完毕");});}else{$("#info").html("正在隐藏...");$("#div1").hide(2000,function(){$("#info").html("隐藏完毕");});}/*$("#div1").toggle(2000);*/});});</script><style type="text/css">#div1{width:200px;height:200px;background-color:red;border:1px black solid;/*clear 属性设置一个元素的侧面是否允许其他的浮动元素。  both左右两侧均不允许浮动元素*/clear:both;}#btn,#info{float:left;}#info{margin-bottom:20px;}</style></head><body><input type="button" value="替换" id="btn"/><div id="info"></div><div id="div1"></div></body></html>

为什么我们要用到clear呢？

因为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

所以我们需要clear:both 来清除掉左右的浮动框

0 0