javascript - 隐藏后如何删除li空间？

Question

如何隐藏 li 并删除它的空格。 下面的代码是图片之间的传输，但是当隐藏前面的li时，出现了空白。

<script type="text/javascript">
    $(document).ready(function () {
        var selectedIndex = 1;
        $("#slide" + selectedIndex + " img").fadeIn(500);
        $("ul.captios li").click(function () {
            var id = $(this).attr("id").split("_")[1];
            $("#slide" + selectedIndex + " img").fadeOut(500, function () {
                $("#slide" + id + " img").fadeIn(500);
                $("#slide" + selectedIndex).css("display:none;");
                selectedIndex = id;
            });

        });
    });
</script>

一个html

 <div id="gal-container">
        <div id="slides-wrapper">
            <ul class="slides">
                <li id="slide1"><img  class="hide" src="imgs/img1.jpg" /></li>
                <li id="slide2"><img  class="hide" src="imgs/img2.jpg" /></li>
            </ul>
        </div>

        <div id="caption-wrapper">
           <ul class="captios">
                <li id="caption_1"><a href="#">img1</a></li>
                <li id="caption_2"><a href="#">img2</a></li>
            </ul>
        </div>
    </div>

Answer 1

为什么不使用:

        $("#slide" + selectedIndex).hide();

??

或者更好的可能是:

 $("#slide" + selectedIndex).fadeOut(500, function () {
      $("#slide" + id).fadeIn(500);
      selectedIndex = id;
 });