Автоматическая ширина и высота div
Здравствуйте. немного освоив jquery и такие css свойства как transition сразу стал с этим играться. задача: есть div с определенной шириной. в нем две "заголовочные" строки, а потом основной контент. изначально высота установлена такой, что видны только первые две строки (при этом конечно overflow:hidden). на второй строке есть кнопка, по нажатию которой высота увеличивается и показывает весь свой контент. Суть в том, чтобы высота увеличивалась именно на высоту всего контента. Пытался решить вопрос таким образом: по клику на кнопку высота устанавливается "auto". В принципе, высота и правда становится той что нужно, но, т.к. при этом задано transition и увеличение высоты выполняется чуть меньше чем за секунду, становится видно, что высота уменьшается плавно до 0, а потом резко становится какой надо. а когда нажимаю на кнопку ещё раз (должна возвращаться обратно до видимости 2 строк) - наоборот высота мгновенно становится 0 и плавно возрастает до двух строк.
что интересно, если задавать высоту не auto, а какое то конкретное значение ставить, то всё происходит как надо. плавно увеличивается и плавно уменьшается без всяких скачков. jquery:
$('div.self > center > span').click(function()
{
if (this.textContent == "Свернуть")
{
$('div.self').css('height','80px');
this.textContent ='Показать';
}
else
{
$('div.self').css('height','auto');
this.textContent = 'Свернуть';
}
});
css:
.self
{
position: fixed;
-webkit-box-shadow: 4px 4px 4px gainsboro;
-moz-box-shadow: 4px 4px 4px gainsboro;
box-shadow: 4px 4px 4px gainsboro;
padding: 5px;
width: 20%;
height: 80px;
border-radius: 15px;
border: 2px solid #FFA500;
margin-top: 12px;
overflow: hidden;
-webkit-transition: 0.8s ease;
-o-transition: 0.8s ease;
-moz-transition: 0.8s ease;
}
та же история с элементом, который я хочу раскрывать в ширину. если ставить ширину auto, то скачками меняется и не в ту сторону. Вот как это всё дело выглядит: https://downloader.disk.yandex.ru/pr...size=XL&crop=0 |
<head>
<style>
body {
background-color:#FCF5E6
}
.hide {
display:none;
}
.click {
cursor:pointer;
}
.all-wrap {
display:inline-block;
min-width:250px;
padding:12px;
border:2px #FEA400 solid;
border-radius:16px;
box-shadow:2px 2px 2px #798B8B;
}
.this-wrp {
width:250px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".click").click(function(){
$(".this-wrp").slideToggle(200).delay(700).slideToggle(300);
var spoil=$(this).parents('.all-wrap').find(".spoil-content");
(spoil.is(':visible') )?(spoil.toggle(100)):(setTimeout(function(){spoil.toggle(300)},900));
$(".click").toggle();
});
});
</script>
</head>
<body>
<div class=all-wrap>
<div align=center class="this-wrp">
<h3 id=title-1>Вы выбрали ...</h2>
<h4 id=title-2 class="click">показать ?</h1>
<h4 id=title-3 class="click hide">свернуть ?</h1>
</div>
<div class="spoil-content hide">
<pre>
Приветы от деда Мороза!
вот....
так!
</pre>
</div>
</div>
</body>
|
Deff,
я наоборот хотел избавиться от того, что высота уменьшается до нуля) но всё равно спасибо, я буквально неделю работаю с jquery и не знай о таких полезных функциях как toggle(), slideUp/Down и других. Получился такой вот код:
<!DOCTYPE html>
<html>
<head>
<title>Site</title>
<style>
.content
{
display:none;
}
.container
{
margin: 30px auto;
padding: 10px;
border: 2px solid black;
border-radius: 8px;
width: 150px;
overflow: hidden;
}
.vis > span:hover
{
cursor: pointer;
background-color: blue;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('div.vis > span').click(function()
{
$('.content').slideToggle(800);
if (this.textContent == 'Скрыть')
this.textContent = 'Показать';
else
this.textContent = 'Скрыть';
});
});
</script>
</head>
<body>
<div class="container">
<div class="vis">
Параметры:<br/>
<span>Показать</span>
</div>
<div class="content">
<p>парам1: <b>знач1</b></p>
<p>парам2: <b>знач2</b></p>
<p>парам3: <b>знач3</b></p>
<p>парам4: <b>знач4</b></p>
<p>парам5: <b>знач5</b></p>
</div>
</div>
</body>
</html>
|
dimous,
на всякий случай если run ставите неплохобы добавить полные пути к jquery и посмотрите свой код в ие -> оригинальная ёлочка получается. |
dimous, возможно это только у меня "ёлочка" в ие смотрите картинку
|
рони, У меня норма в ИЕ 6 -7 (ну и 8 в ИЕ тестере
|
Deff,
а как можно сделать тот же эффект, только с шириной? чтобы сбоку выезжала табличка. через slide не получится, т.к. он изменяет только высоту. пробовал через css, но там та же засада, что и с высотой была: скачет до нулевой ширины jquery:
$('div.page').mouseover(function()
{
$(this).css('width','auto');
});
$('div.page').mouseout(function()
{
$(this).css('width','10px');
});
css:
.page
{
z-index: 1;
padding: 10px;
position: fixed;
overflow: hidden;
bottom: 50px;
padding: 5px 15px;
margin: 0 auto;
-webkit-box-shadow: 4px 4px 4px gainsboro;
-moz-box-shadow: 4px 4px 4px gainsboro;
box-shadow: 4px 4px 4px gainsboro;
-webkit-transition: 0.8s ease;
-o-transition: 0.8s ease;
-moz-transition: 0.8s ease;
border: 2px solid #FFA500;
}
|
| Часовой пояс GMT +3, время: 11:38. |