js点击一个按钮，缓慢弹出一个对话框

<link type="text/css" rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css"/>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<div style="display:none">
    <div id='inline_content' style='padding:10px; background:#fff;'>
        <p><strong>This content comes from a hidden element on this page.</strong></p>
        <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
        <p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>

        <p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>
        <p>
            Updating Content Example:<br />
            <a class="ajax" href="../content/ajax.html">Click here to load new content</a>
        </p>
    </div>
</div>
<script>
    $(".inline").colorbox({ inline: true, width: "50%" });
</script>