19.10.2015, 05:08
|
|
Аспирант
|
|
Регистрация: 29.12.2012
Сообщений: 34
|
|
|
hide увеличивает высоту?
добрый день!
имею вот таких два очаровательных блока
пример
задача - плавно свернуть 1й блок влево по нажатию на 2ой блок!
как видите почему то второй блок начинает прыгать вниз!
в чем проблема? почему они не сворачиваются на одном уровне? |
|
19.10.2015, 07:21
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
В том, что элементы inline-block, а .hide() уменьшает сразу по ширине и высоте. Вместо display:inline-block; задать float:left;, а
$('.main_factors_div').hide(7000);
заменить на
$('.main_factors_div').animate({width : 0, opacity : 0}, 7000);
Последний раз редактировалось laimas, 19.10.2015 в 07:23.
|
|
19.10.2015, 08:25
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
laimas,
всё равно вроде по высоте прыгает в конце анимации ... нужно наверно ещё что-то в css добавить...
|
|
19.10.2015, 08:57
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
рони, это прыгает потому, что текст становится в две строки, а уж как ему надо, то-ли overflow:hidden; и white-space:nowrap; сделать, то-ли лучше будет размер шрифта анимировать.... Пусть сам решает 
|
|
19.10.2015, 15:11
|
|
Аспирант
|
|
Регистрация: 29.12.2012
Сообщений: 34
|
|
Сообщение от laimas
|
|
рони, это прыгает потому, что текст становится в две строки, а уж как ему надо, то-ли overflow:hidden; и white-space:nowrap; сделать, то-ли лучше будет размер шрифта анимировать.... Пусть сам решает
|
Ты не прав, функция hide выставляет первому блоку свойство overflow:hidden, а толку нет!! |
|
19.10.2015, 15:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
19.10.2015, 15:50
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от monax_111
|
|
Ты не прав, функция hide выставляет первому блоку свойство overflow:hidden, а толку нет!!
|
Какая функция, если это через стили задавать надо. |
|
19.10.2015, 20:00
|
|
Аспирант
|
|
Регистрация: 29.12.2012
Сообщений: 34
|
|
|
Сообщение от laimas
|
|
Какая функция, если это через стили задавать надо.
|
во время выполнения анимации нажми на паузу и посмотри на стили объекта - специально время большое задал |
|
19.10.2015, 20:04
|
|
Аспирант
|
|
Регистрация: 29.12.2012
Сообщений: 34
|
|
|
Сообщение от рони
|
|
monax_111,
|
получилось, спасибо - но все же интересно почему обычная функция hide так плохо работает..... |
|
19.10.2015, 20:09
|
|
Аспирант
|
|
Регистрация: 29.12.2012
Сообщений: 34
|
|
|
вообщем пока что самое простое решение это поменять
display: inline-block; на float:left;
тогда и функция hide работает нормально
|
|
|
|
