隐藏显示DIV时怎样控制速度

秋水与长天一色 2008-05-06 05:43:42

如题：在隐藏显示DIV的时候怎样控制DIV的显示速度哪？
就是让他显示隐藏的想做电梯一样！不是一下子就显示隐藏了！有个能看到的间歇！
如在线翻译离的更好的翻译意见：
http://translate.google.com/translate_t

...全文

414 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

xuyiazl 2008-05-06

打赏
举报

后面一种是google翻译你给的那个效果

xuyiazl 2008-05-06

打赏
举报



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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <title>tooltip</title>



    <script type="text/javascript" src="tooptip/jquery.js"></script>

    <script language="javascript">

        $(document).ready(function(){

            $('a').toggle(function(){

                $('#tooltip').slideDown('slow');

            },function(){

                $('#tooltip').slideUp('slow');

            })

        })

    </script>

    <style type="text/css">

	#tooltip{

		background-color: #444;

		border: 1px solid #fff;

		padding: 10px;

		color: #ccc;

		position: absolute;

		overflow: hidden;

		width:200px;

		height:200px;	

		display:none;

	}

	</style>

</head>

<body>

    <div id='tooltip'>

        <ul>

            <li>我变!!!</li><li>我变!!!</li><li>变猪头了!!!</li>

        </ul>

    </div>

    <br>

    <br><br>

    <br><br>

    <br><br>

    <br><br>

    <br><br>

    <br><br>

    <br><br>

    <a href="#">切换元素的可见状态</a>

</body>

</html>

xuyiazl 2008-05-06

打赏
举报

演示地址及源码下载





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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <title>tooltip</title>



    <script type="text/javascript" src="tooptip/jquery.js"></script>



    <script type="text/javascript" src="tooptip/interface.js"></script>



    <style type="text/css">

	#tooltip{

		background-color: #444;

		border: 1px solid #fff;

		padding: 10px;

		color: #ccc;

		position: absolute;

		overflow: hidden;

		width:200px;

		height:200px;	

	}

	</style>

</head>

<body>

    <div id='tooltip'>

        <ul>

            <li>我变!!!</li><li>我变!!!</li><li>变猪头了!!!</li>

        </ul>

    </div>

    <br>

    <br><br>

    <br><br>

    <br><br>

    <br><br>

    <br><br>

    <br><br>

    <br><br>

    <a href="#" onclick="$('#tooltip').SlideOutUp(500);return false;">Slide out up</a>

            <a href="#" onclick="$('#tooltip').SlideInUp(500);return false;">Slide in up</a>

            <a href="#" onclick="$('#tooltip').SlideToggleUp(500, null, 'bounceout');return false;">

                Slide toggle up</a>

            <br>

            <br>

            <a href="#" onclick="$('#tooltip').SlideOutRight(500);return false;">Slide out right</a>

            <a href="#" onclick="$('#tooltip').SlideInRight(500);return false;">Slide in right</a>

            <a href="#" onclick="$('#tooltip').SlideToggleRight(500, null, 'bounceout');return false;">

                Slide toggle right</a>

            <br>

            <br>

            <a href="#" onclick="$('#tooltip').SlideOutDown(500);return false;">Slide out down</a>

            <a href="#" onclick="$('#tooltip').SlideInDown(500);return false;">Slide in down</a>

            <a href="#" onclick="$('#tooltip').SlideToggleDown(500, null, 'bounceout');return false;">

                Slide toggle down</a>

            <br>

            <br>

            <a href="#" onclick="$('#tooltip').SlideOutLeft(500);return false;">Slide out left</a>

            <a href="#" onclick="$('#tooltip').SlideInLeft(500);return false;">Slide in left</a>

            <a href="#" onclick="$('#tooltip').SlideToggleLeft(500, null, 'bounceout');return false;">

                Slide toggle left</a>

                

                

            <br />设置数字控制速度

            

            <a href="display.rar">下载源码地址</a>

</body>

</html>