0

Как сделать чтоб не рывком ширина div увеличилась а плавно?

<style>
 #menu { background: #000; width: 200px;    height: 30px;}
</style>

<div id="menu"  onclick="active()"></div>

<script>
function active(){  
    var x = document.getElementById('menu').style.width;
    if (x == '400px'){  x = '200px';}
    else{x = '400px';}      
    document.getElementById('menu').style.width = x;
}   
</script>
3
  • 2
    лучше конечно на javascript
    – Леха
    15 ноя 2015 в 7:25
  • почему лучше на яваскрипте, а не, например, css?
    – Grundy
    15 ноя 2015 в 8:14
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 15 ноя 2015 в 18:56

3 ответа 3

1

function animate(elem, style, unit, from, to, time) {
    if (!elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            elem.style[style] = (from + step * (to - from)) + unit;
            if (step == 1) clearInterval(timer);
        }, 1);
    elem.style[style] = from + unit;
}

var w1 = 200,
    w2 = 400;
menu.addEventListener('click', function () {
    animate(this, 'width', 'px', w1, w2, 1000);
    w1 = [w2, w2 = w1][0];
}, false);
#menu {
    background: #000;
    width: 200px;
    height: 30px;
}
<div id="menu"></div>

1
  • а easing кто писать будет? : )
    – Sergiks
    15 ноя 2015 в 8:09
0

В active() присвой блоку #menu класс yourclass. В ксс #menu добавь параметр transition (например 200ms). Потом добавь селектор #menu.yourclass, в котором поставь другое значение width, например 400px

0

Можно сделать с помощью CSS3 анимации. Добавить св-во transition, в котором обозначить, что св-во width должно меняться в течение 2 секунд. И по клику менять ширину, добавляя класс с другим значением width:

var el = document.getElementById('menu');

function toggle(){
    var classes = el.className.split(/\s+/),
        i = classes.indexOf('active');
    if ( i == -1) classes.push('active');
    else classes.splice(i,1); 
    el.className = classes.join(' ');
}
el.addEventListener('click', toggle);
#menu{background:#333; width: 200px; height: 30px; transition: width 2s;cursor:pointer;text-align:center;color:#FFF;line-height:30px;font-family:Arial,Helvetica;}
.active{width: 400px !important}
<div id="menu">нажми меня</div>

Фиддл


Upd. без класса выглядит лаконичнее, но придётся каждому элементу давать ширину явно.

Ваш ответ

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

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