Плавное открытие и закрытие блока текста
Доброе утро
Есть код(нашел на этом же ресурсе), который при нажатии на ссылку открывает и при повтором нажатии закрывает скрытый текст Что нужно добавить, что бы блок открывался/закрывался плавно? Важно сохранить "Открыть/Скрыть"
<script>
window.onload= function() {
document.getElementById('toggler').onclick = function() {
openbox('box', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if(div.style.display == 'block') {
div.style.display = 'none';
toggler.innerHTML = 'Открыть';
}
else {
div.style.display = 'block';
toggler.innerHTML = 'Закрыть';
}
}
</script>
<a id="toggler">Открыть</a> <div id="box" style="display: none;">Отображаемый блок</div> |
Нужно CSS. Или JQ. Или сами пишите плавное изменение высоты/ширины по таймеру. display="block" это самоочевидно не плавно.
|
Задачу решил кустарным способом, всем спасибо
function BspoilerControl(){
//Скрываем все спойлеры
$("div[name='spoiler']").hide();
//Всем кнопкам спойлеров задаем текст и картинку (удобно для многоязыковых интерфейсов)
$("p[name='spoilerbutton']").html("ЧИТАТЬ ДАЛЕЕ");
//Перебераем все кнопки спойлеров на странице
$("p[name='spoilerbutton']").each(function(){
//Если прямо перед кнопкой спойлера стоит заголовок
if($(this).prev(this).get(0).tagName == "H1" || $(this).prev(this).get(0).tagName == "H2" || $(this).prev(this).get(0).tagName == "H3"){
//Текст из заголовка переносим в кнопку, а сам заголовок убераем
var NewSpoilerButton = "<div name='spoilerbutton' class='advSpoilerHeader'><p><b>"+$(this).prev(this).html()+"</b> <span>ЧИТАТЬ ДАЛЕЕ</span></p></div>";
$(this).prev(this).replaceWith("");
$(this).replaceWith(NewSpoilerButton);
//В результате кнопки спойлеров с заголовками становятся div-ами. Теперь на странице может быть 2 типа кнопок спойлеров p и div типа
}
});
//Для всех div кнопок обрабатываем клик
$("div[name='spoilerbutton']").click(function () {
//Если спойлер видим. Дословно: если свойство display для первого DOM брата/сестры равно "block" (т.е. видим в контексте применяемого эффекта slide)
if($(this).next(this).css("display")=="block"){
//Записываем "показать>>" в span, который ребенок p, который ребенок нашей кнопки this. Потом поменяем его на "<<скрыть"
$(this).children("p").children("span").html("ЧИТАТЬ ДАЛЕЕ");
//Сворачиваем открытый спойлер
$(this).next(this).slideUp("normal");
} else {
//Если спойлер не открыт, то он закрыт и соответственно меняем надпись и разворачиваем спойлер
$(this).children("p").children("span").html("СКРЫТЬ");
$(this).next(this).slideDown("normal");
}
return false;
});
//Теперь клик для всех p-кнопок
$("p[name='spoilerbutton']").click(function () {
//По тому же принципу, что до этого, только проще
if($(this).next(this).css("display")=="block"){
$(this).next(this).slideUp("normal");
$(this).html("ЧИТАТЬ ДАЛЕЕ");
} else {
$(this).next(this).slideDown("normal");
$(this).html("СКРЫТЬ");
}
return false;
});
}
<head>
<script type="text/javascript">
$(document).ready(function(){
BspoilerControl();
});
</script>
</head>
<p name='spoilerbutton' style='cursor:pointer'></p>
<DIV name='spoiler' class='spoiler'>
содержимое блока
</div>
|
Ахренеть. Вместо 3 строк css и 2 в js - телега "выбераем и перебераем".
Все на выберы президента! Кого выберали? - Того же! Это - перебер! |
:( 10000001 поиск ...
http://javascript.ru/forum/jquery/48...tml#post317257 |
Цитата:
Можете мне написать не тяжелый код? По вашему предыдущему комментарию я так понял, что нет По этому я нашел рабочий вариант, главное что он удовлетворяет мои задачи с лихвой |
Цитата:
Цитата:
Спасибо |
Потому что это мегабаян в стопицотый раз показывать как воткнуть в элемент класс с transition, а потом выткнуть класс с transition.
Я как-то тоже поискал годный простой попуп и все равно написал свой. Принцип точно такой же:
var popup_message=function(title){
if(!title)
return;
if(typeof pop_message === 'undefined') {
pop_message=document.body.appendChild(document.createElement('div'));
pop_message.className='pop_message';
}
pop_message.title=title;
pop_message.classList.add('pop_message_show');
setTimeout(function(){
pop_message.classList.remove('pop_message_show');
},1500);
};
div.pop_message {
position:fixed;
top:0;
width:100%;
text-align:center;
visibility:hidden;
opacity:0;
transition:opacity .5s;
}
/*
*/
div.pop_message:before{
content:attr(title);
display:inline-block;
background-color:#a00c20;
font-size:14px;
line-height:30px;
color:white;
padding:0 20px;
box-shadow:3px 3px 5px rgba(95,65,25,0.15);
}
div.pop_message_show {
visibility:visible;
opacity:1;
transition:opacity .5s;
}
ундерстенд? |
А, ну да, они все были с кликами, вспомнил, точно, поэтому пришлось свой безкличный написать.
Ну вот, а теперь если вместо события от таймера будет событие от мыши? |
С другой стороны я подумал а ведь все правильно делает ТС. Задал вопрос, сразу не написали, нашел кошмарный код, возник челендж, значит скоро все напишут, готовенькое.
|
Цитата:
Моя проблема решена, всего хорошего |
| Часовой пояс GMT +3, время: 06:21. |