Я создал сценарий 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 в качестве inline-block
, удалите дисплей и поместите их влево, вместо этого используйте float: left
в вашем CSS.
.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;
}
Попробуйте добавить это в свой CSS:
.first,.second,.third {
vertical-align: top;
}
Во время анимации overflow
имеет значение overflow: hidden
что приводит к смещению других встроенных элементов. Добавление vertical-align: top
по vertical-align: top
должен устранить проблему.
Обновленная скрипка: http://jsfiddle.net/EhjeA/3/
Вы можете обернуть оскорбительные divs в обертке с фиксированной шириной: http://jsfiddle.net/EhjeA/1/
.wrapper {
display: inline-block;
width: 100px;
}
<div class="wrapper">
<div class="first">
1
</div>
</div>
float: left
вы также можете сохранитьinline-block
в своем CSS, и это все равно решит вашу проблему. jsfiddle.net/EhjeA/5 Я просто не вижу, что вам это нужно с левым поплавком, но вы можете оставить его там на всякий случай.