Показать / Скрыть Div в jQuery, проблема с «пропуском» div

0

Я создал сценарий jQuery, в котором вы можете скрыть или показать один из div (первый) при нажатии кнопки hide

Код выглядит следующим образом:

$('.hideButton').click( function() {
    var toggleWidth = $(".first").width() == 100 ? "10px" : "100px";
    $('.first').animate({ width: toggleWidth},200);

    if ( $('.first').width() == 10 ){
        $(".content").attr("hidden",false);
    }
    else if ( $('.first').width() == 100 ){
        $(".content").attr("hidden",true);
    }

});

HTML:

<div class="contain">
    <div class="row">
            <div class="navigation">
                navigation
            </div>
            <div class="advert">
                advert
            </div>
    </div>
    <div class="row">
        <div class="main">
            main
            <br/>
            <button class="hideButton">hide</button>
            <br/>
            <div class="first">
                1
            </div>
            <div class="second">
                2
            </div>
            <div class="third">
                3
            </div>
        </div>
    </div>
</div>

CSS:

.row{
   margin-left:0px;
}
.navigation{
    height:100px;
    background-color:orange;
    width:400px;
    display:inline-block;
}
.advert{
    height:100px;
    background-color:lime;
    width:200px;
    display:inline-block;
}
.main{
    width:600px;
    height: 300px;
    background-color: magenta;
}
.first{
   width:100px;
    height:80%;
   background-color: yellow;
   display:inline-block;
}
.second{
   width:100px;
   height:80%;
   background-color: blue;
    display:inline-block;
}
.third{
   width:100px;
    height:80%;
   background-color: red;
    display:inline-block;
}

И лучший способ заключается в том, что вы видите это в jsfiddle: http://jsfiddle.net/dzorz/EhjeA/

Теперь у меня проблема с двумя другими div. Когда я нажимаю кнопку "Скрыть", а первый div получает анимированные, другие два div на анимации, оба пропускают до конца первого div, и когда анимация завершается, они возвращаются на место. Это действительно раздражает, и я не знаю, как решить его...

Мне нужен только один div, который скрывается при нажатии кнопки и что он не влияет ни на что другое...

Является ли этот пример исправляемым или, может быть, вы могли бы предложить мне хороший плагин jQuery, который делает то же самое?

Теги:

3 ответа

2
Лучший ответ

Вместо того, чтобы отображать эти 3 в качестве inline-block, удалите дисплей и поместите их влево, вместо этого используйте float: left в вашем CSS.

Демо-версия JSFiddle

.first{
   width:100px;
   height:80%;
   background-color: yellow;
   float: left;
}
.second{
   width:100px;
   height:80%;
   background-color: blue;
   float: left;
}
.third{
   width:100px;
   height:80%;
   background-color: red;
   float: left;
}
Поделиться
  • 0
    Мне нравится ваш ответ, но, возможно, мне понадобится свойство inline-block, сейчас я протестирую этот ответ на моем реальном проекте
  • 0
    С помощью float: left вы также можете сохранить inline-block в своем CSS, и это все равно решит вашу проблему. jsfiddle.net/EhjeA/5 Я просто не вижу, что вам это нужно с левым поплавком, но вы можете оставить его там на всякий случай.
1

Попробуйте добавить это в свой CSS:

.first,.second,.third {
    vertical-align: top;
}

Во время анимации overflow имеет значение overflow: hidden что приводит к смещению других встроенных элементов. Добавление vertical-align: top по vertical-align: top должен устранить проблему.

Обновленная скрипка: http://jsfiddle.net/EhjeA/3/

Поделиться
  • 0
    Люблю твой ответ, сейчас проверю
1

Вы можете обернуть оскорбительные divs в обертке с фиксированной шириной: http://jsfiddle.net/EhjeA/1/

.wrapper {
    display: inline-block;
    width: 100px;
}

<div class="wrapper">
  <div class="first">
    1
  </div>
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню