javascript - 首先显示，然后通过 jQuery 隐藏

Question

我有这个 HTML 结构:

 <div id="side-menu">
            <ul>
            <li><img src="img/once_sonra.png"></img></li>
            <li><img src="img/online_destek.png"></img></li>
            <li><img src="img/sizi_arayalim.png"></img></li>
            </ul>

  </div>

CSS:

#side-menu {
    display:block;
    z-index:20;
    position:fixed;
    right:0;
    top:76px;
}

我想，当点击我的页面时显示这个项目，然后隐藏动画效果但我不知道我该怎么做？谢谢。

Answer 1

像这样:

$(document).ready(function() {
    // hide the menu initially
    $("#side-menu").hide();
    $(document).click(function() {
        // on click show and then hide menu with animation
        $("#side-menu").slideDown().delay(500).slideUp();
    });
});

演示:http://jsfiddle.net/dhVzq/

如果你不喜欢 jQuery 给你的幻灯片效果 several other options .