Форум

dimous · #1 (**permalink**) 07.08.2013, 01:46

Здравствуйте. немного освоив 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

Deff · #2 (**permalink**) 07.08.2013, 03:51

<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>

dimous · #3 (**permalink**) 07.08.2013, 14:59

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>

рони · #4 (**permalink**) 07.08.2013, 15:15

dimous,
на всякий случай если run ставите неплохобы добавить полные пути к jquery и посмотрите свой код в ие -> оригинальная ёлочка получается.

рони · #5 (**permalink**) 07.08.2013, 21:35

dimous, возможно это только у меня "ёлочка" в ие смотрите картинку

Deff · #6 (**permalink**) 07.08.2013, 22:02

рони, У меня норма в ИЕ 6 -7 (ну и 8 в ИЕ тестере

dimous · #7 (**permalink**) 08.08.2013, 00:22

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;
}

Форум

Справочник

Discord чат

Курсы javascript