hide увеличивает высоту?
добрый день!
имею вот таких два очаровательных блока пример задача - плавно свернуть 1й блок влево по нажатию на 2ой блок! как видите почему то второй блок начинает прыгать вниз! в чем проблема? почему они не сворачиваются на одном уровне? |
В том, что элементы inline-block, а .hide() уменьшает сразу по ширине и высоте. Вместо display:inline-block; задать float:left;, а
$('.main_factors_div').hide(7000); заменить на $('.main_factors_div').animate({width : 0, opacity : 0}, 7000); |
laimas,
всё равно вроде по высоте прыгает в конце анимации ... нужно наверно ещё что-то в css добавить... |
рони, это прыгает потому, что текст становится в две строки, а уж как ему надо, то-ли overflow:hidden; и white-space:nowrap; сделать, то-ли лучше будет размер шрифта анимировать.... Пусть сам решает :)
|
Цитата:
|
monax_111,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<style>
.main_factors_div {
white-space:nowrap;
}
.additions {float:left;padding:15px;background-color:#E5E5E5;margin:30px}
.additions:hover{background-color:#C3C3C3}
.div_connect {display:block;padding:15px;background-color:#E5E5E5;margin:10px 100px}
.div_connect:hover{background-color:#C3C3C3}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<center>
<center class=" additions main_factors_div">
4 фактор(ов)
</center>
<center class="additions main_connect_div">
5 связь(ей)
</center>
</center><script>
$(document).ready(function () {
doc_w = $(window).width()-50;
additions_div_width=(doc_w-300)/2;
$('.additions').css({"width":additions_div_width})
$('.main_connect_div').one("click",show_connect)
})
function show_connect(){
$('.main_factors_div').animate({width : 0, opacity : 0}, 7000).css({});
}
</script>
</body>
</html>
|
Цитата:
|
Цитата:
|
Цитата:
|
вообщем пока что самое простое решение это поменять
display: inline-block; на float:left; тогда и функция hide работает нормально |
| Часовой пояс GMT +3, время: 02:34. |