1 Тема від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Тема: Як зробити плавну зміну висоти блока?

Хай. Тре зробити, щоб при наведені на деякий блок, він плавно змінював свою висоту, transition в CSS працює не так, як треба, там якийсь гогаль могаль виходить. Так от, я думав, що то все легко, просто повісити функцію на подію mouseover чи там mouseenter, і змінювати в циклі висоту. Спочатку я зробив, щоб лічильник збільшувався на 1, але то дуже швидко, а потім зробив, щоб на 0.1, і це теж не ок. А потім почав гуглити функцію Sleep для JS, і там нічо норм не знайшов, та й не дуже шукав, коли побачив, що там роблять якісь костилі за допомогю дати. Так от, як зробити плавну зміну висоти блока при наведені на нього мишки?

2 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Як зробити плавну зміну висоти блока?

jquery animation

funivan вебсайт

3 Відповідь від Invader Востаннє редагувалося Invader (27.12.2013 21:29:58)

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Як зробити плавну зміну висоти блока?

Використовуй jQuery Отак:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
    var aaa = document.getElementById('aaa');
    var height;
    var atm;
    aaa.addEventListener('mouseover',function(){
        atm = setInterval(function(e){
            //height = aaa.style.height.replace(/\D/g,'');
            height = parseInt(aaa.style.height);
            height += 1;
            aaa.style.height = height + 'px';
            if (height > 200) {
                clearInterval(atm);
            }
        },100);
    },false);
}
</script>
</head>
<body>
<div id="aaa" style="background-color:red;height:20px;">
</div>
</body>
</html>

треба клацнути по червоному.

PS
Відредагував код.

Подякували: FakiNyan1

4 Відповідь від Invader Востаннє редагувалося Invader (27.12.2013 21:27:31)

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Як зробити плавну зміну висоти блока?

Але вона якась трохи дьоргана.

PS
Ще забув написати що значення може бути не в пікселях і тому не px потрібно буде додавати.

Подякували: FakiNyan1

5 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як зробити плавну зміну висоти блока?

Invader написав:

Але вона якась трохи дьоргана.

PS
Ще забув написати що значення може бути не в пікселях і тому не px потрібно буде додавати.

да то я знаю, що не пікселі