Изменить знак в выражении или скрипт плавного изменения размеров
Пример: http://www.пкмосква.рф/13/
Есть код разворачивающей и сворачивающей функций, отличаются они двумя знаками: >/< и -/+ Хочется код сократить до единственной функции, определять как-то оба знака, есть способы изменять знак в выражении на js? Понятно, конструкции превосходящие по сложности, текущий вариант бесполезны Или любые упрощения кода, может у кого хорошии функции есть свои, в сети ничего по данному вопросу не нашёл?
function Show(Id, h)
{
var obj = document.getElementById(Id);
if (obj.offsetHeight < h)
{
obj.style.height = (obj.offsetHeight + 10) + "px";
setTimeout (function(){Show(Id, h)}, 8);
}
}
function Hidden(Id, h)
{
var obj = document.getElementById(Id);
if (obj.offsetHeight > h)
{
obj.style.height = (obj.offsetHeight - 50) + "px";
setTimeout (function(){Hidden(Id, h)}, 8);
}
}
</SCRIPT>
Было бы идиотизмом не иметь подобных возможностей в современном языке программирования |
Ставишь в качестве аргмента еще один параметр, и проверяешь, если он такой-то, то знак >, если другой, то знак: < итд
|
Fenjmen51,
Cтандатный вариант toggle - При разворачивания добавлем класс( или иной атрибут) при очередном действе смотрим - атрибут есть - сворачиваем - атрибута нет - разворачиваем... А вообще сейчас это всё через css делается http://hostjs-mybb2011.narod.ru/smooth_deployment.htm
<!DOCTYPE HTML>
<div class="height" style="width:400px" onMouseOver="this.id='height'">
Очень качественное развёртывание блока, плавное!
</div>
<STYLE>
BODY, HTML{margin:0;padding:0}
div.height{
margin:25px 0 0 5em;padding:10px;background:#55f;width:400px;color:white;border-radius:15px;cursor:pointer;border:3px solid #eee;
min-height:20px;
}
#height:hover{
max-height:400px;
height:400px;
transition-duration: 1.66s;
-webkit-transition-duration: 1.66s;
-moz-transition-duration: 1.66s;
-o-transition-duration: 1.66s;
-ms-transition-duration: 1.66s; /* IE9+ */
}
#height{
transition-duration: 1.66s;
-webkit-transition-duration: 1.66s;
-moz-transition-duration: 1.66s;
-o-transition-duration: 1.66s;
-ms-transition-duration: 1.66s; /* IE9+ */
}
</style>
|
Хочется избавиться от лишних 5 строк, а не добавить ещё 2, интересно было бы менять знак, действительно добавить ещё переменную и передавать ею знак, например, так 2 символа будет лишних. С if дураку понятно, что можно. Или можно обойтись без двойного повторения и как-то переменной знак задать или ещё что придумать?
Пример с CSS3 и трансформацией, в IE9, Фаерфоксе - не работает, просто быстро открывает, может правда им можно большее время задать. Работает в Опере. Однако вопрос у меня про знаки остаётся, можно ли их как-то менять? Про проверку атрибутов, выходит тоже две функции с if ? те же 10 строчек, аналогично и с CSS level 3, тоже строк больше. Люблю всё делать на нём, однако не в этот раз |
Fenjmen51,
У Вас же есть проверка - объединяйте в одну функцию
<!DOCTYPE HTML>
<div id="height" onMouseOver='Toggle("height", 400,true)' onMouseOut='Toggle("height", 50,false)'>
Очень качественное развёртывание блока, плавное!
</div>
<STYLE>
BODY, HTML{margin:0;padding:0}
#height{margin:25px 0 0 5em;padding:10px;background:#55f;width:400px;color:white;border-radius:15px;cursor:pointer;border:3px solid #eee;}
</STYLE>
<SCRIPT>
function Toggle(Id, h, S)
{
var obj = document.getElementById(Id);
if (obj.offsetHeight < h&&S)
{
obj.style.height = (obj.offsetHeight + 10) + "px";
setTimeout (function(){Toggle(Id, h,true)}, 8);
}
if (obj.offsetHeight > h&&!S)
{
obj.style.height = (obj.offsetHeight - 50) + "px";
setTimeout (function(){Toggle(Id, h,false)}, 8);
}
}
</SCRIPT>
|
| Часовой пояс GMT +3, время: 06:12. |