Автоматическая ширина и высота 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, время: 12:00. |