3

Добрый день! Есть такой скрипт, который скрывает форму-блок, а при клике на ссылку показывает её, вопрос в том как сделать показ скрытого блока плавным, чтобы после клика форма-блок плавно разъезжалась, нужно желательно то что есть модифицировать, без привлечения библиотек. Вот то, что есть сейчас:

function toggleInformer()   
{       
// ищем нужный нам тег информера
var elm = document.getElementById("informer");

    // если тег найден, обрабатываем его
if(elm)
{
    // меняем видимость элемента на противоположную
    if(elm.style.display == "block")
    {
        elm.style.display = "none";
        document.getElementById("button").innerHTML= '+ развернуть ↓';
    }
    else
    {
        elm.style.display = "block";
        document.getElementById("button").innerHTML= '- спрятать ↑';

    }

}

}

и html

<div id="reg">
<a id="button" href="#" onclick="toggleInformer(); return false;"> Регистрация</a>
 <div id="informer">
  тут форма
 </div>
</div>

Я думаю, что нужно что-то тут elm.style.display указывать время нужное на раздвижение и т.д.

Подскажите, пожалуйста:)

1
  • 1
    Может element.style,opacity циклом крутить от 0 до 1? Всё это будет настолько сложно, при подключении JQuery эта задачка решится одной строчкой: $('#informer').fadeIn(500); jsfiddle.net/alpha9000/EEgu7
    – ferrari
    27 авг 2013 в 9:14

1 ответ 1

10

Т.к. сейчас уже 2013 год, большинство браузеров поддерживают CSS3 Transition, поэтому используйте их: http://jsfiddle.net/FtL6G/

1
  • Спасибо, то что нужно!
    – Rumato
    29 авг 2013 в 4:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.