求一个渐出的效果，可以使用jquery

easyroom 2011-11-16 11:40:41

两个div，默认呈现一个A，点击按钮后另一个B出来盖住它，并替换之，再点用B替换A

另外要求页面其他元素不会被挤的移动

...全文

93 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

persuit666 2011-11-17

打赏
举报

不抖动的话，需要设定div css里的position 为绝对定位

easyroom 2011-11-17

打赏
举报

而且是要一个盖住另一个，然后被盖住的再消失，有点类似一页书翻过来了，盖住上一页

easyroom 2011-11-17

打赏
举报

主要是不想让它挤的后面的元素布局发生变化

默默不得鱼 2011-11-17

打赏
举报

LZ翻下API就有了
.slideToggle('slow')

easyroom 2011-11-17

打赏
举报

那个可怜的submit按钮会被挤的上下抖动，有没有固定大小的啊？

[Quote=引用 1 楼 dencey 的回复:]

用jquery的一个简单示例，可以参考jquery动画api
HTML code

<html>
<head>
<meta charset="utf-8">
<title>testing</title>
<style type="text/css">
div {
width:200px;
height:50px;
}
……
[/Quote]

easyroom 2011-11-17

打赏
举报

我想要个滑动的，不要淡入淡出的。

[Quote=引用 2 楼 liangws 的回复:]

这个要配合css设置样式实现~请参考
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"……
[/Quote]

dencey 2011-11-16

打赏
举报

用jquery的一个简单示例，可以参考jquery动画api



<html>

  <head>

  <meta charset="utf-8">

  <title>testing</title>

    <style type="text/css">

	div {

		width:200px;

		height:50px;

	}

	#d2 {

		display:none;

		background-color:#FF00FF;

	}

	#d1 {

		background-color:#99FFFF;

	}

	</style>

    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>

    <script>

	function change() {

		$("#d1").toggle(1000);

		$("#d2").toggle(1000);

	}

    </script>

  </head>

  <body>

  <div id="d1">abc</div>

  <div id="d2">abc</div>

  <p><input type="button" value="sumbit" onClick="change()"></p>

  </body>

</html>

liangws 2011-11-16

打赏
举报

这个要配合css设置样式实现~请参考



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta http-equiv="Content-Language" content="zh-cn" />



        <title>test</title>

<style type="text/css">







#test1 {

	position:absolute;

	z-index:99;

	top:100px;

	left:100px;

	height:100px;

	width:100px;

	background:red;

}



#test2 {

	position:absolute;

	z-index:100;

	top:100px;

	left:100px;

	height:100px;

	width:100px;

	background:blue;

	display:none;

}



</style>



</head>

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>

</head>

<body>

<div id="test1">A页面</div>

<div id="test2">B页面</div>

<button id="buttonId">click</button>

</body>

<script type="text/javascript">

$(function(){

	$("#buttonId").click(function(){

		$("#test2").fadeToggle(1000);

	})

})

</script>

　

</html>