Как убрать ли пространство после его скрытия?

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;
 });

Answer 2

У вас есть ошибка в вашем коде. Изменить

$ ("# slide" + selectedIndex) .css ("display: none;");

до

$ ("# slide" + selectedIndex) .css ({display: 'none'}); или $ ("# slide" + selectedIndex) .css ('display', 'none');

http://api.jquery.com/css/

Answer 3

Вы звоните .css() неправильно. Вы можете передать ему одну строку, которая является именем свойства CSS, и она будет действовать как «получатель», возвращая значение для этого свойства.

Или вы можете передать ему две строки: имя свойства CSS и значение, которое будет действовать как «установщик», устанавливая для этого свойства это значение.

Итак, вместо $("#slide" + selectedIndex).css("display:none;"); вы хотите $("#slide" + selectedIndex).css("display", "none");.

Answer 4

Не знаю, если это ваша проблема, но ... эта строка неверна:

$("#slide" + selectedIndex).css("display:none;");

Должно быть:

$("#slide" + selectedIndex).css('display', 'none');
// OR
$("#slide" + selectedIndex).hide();

Answer 5

Вы неправильно написали часть css:

$("#slide" + selectedIndex).css("display:none;"); // It will return the css 
                                                  //definition for display:none

Используйте это вместо:

$("#slide" + selectedIndex).css('display', 'none')

или функцию hide, которая делает из коробки точно то же самое:

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