LINUX.ORG.RU

Плавное изменение размеров блока.

 


0

2

Код:

function SIZET()
{
  var W = document.getElementById('t').clientWidth
  if (W == 85)
  {
   document.getElementById('t-arrow').innerHTML = '&#9656';
   document.getElementById('t-arrow').style.left = '3px'; 
   document.getElementById('t').style.width = '163px';
  }
  else
  {
   document.getElementById('t-arrow').innerHTML = '&#9666';
   document.getElementById('t-arrow').style.left = '1px';
   document.getElementById('t').style.width = '85px';
  }
}
Попробовал через while (W != 165), но все равно все мгновенно отобразилось. Как изменить размер блока плавно, не используя монструозные жквери и флеши?

★★★

Последнее исправление: AlexCones (всего исправлений: 1)
Ответ на: комментарий от Eddy_Em

Плюсую: я и сам негодую от говнокодеров, использующих монструозные библиотеки (вроде той же ненужной jquery) вместо коротких самописных функций.

Ты говоришь всё верно, но упускаешь одну крохотнуууую детальку. Вместо этих коротких самописных функций пишут такой код, как в ТС-посте. И мучаются по двое суток, вместо того чтобы сделать как нормальные люди.

tensai_cirno ★★★★★
()
Ответ на: комментарий от RR

И да, почему таки jquery? Вот мне нравится ExtJS, и таки она более ынтырпрайзней =)

Пример кейфрейм анимации на екстиджс4

itemClick: function (view, record, item) {
    var me = this,
        el = Ext.get(item),
        icon = el.down('img'),
        left = icon.getLeft(),
        top = icon.getTop(),
        w = icon.getWidth(),
        h = icon.getHeight(),
        scale = 4,
        fade = 0.5;

    icon.
    animate({
        duration: 100,
        keyframes: {
            50: {
                x: left + scale/2,
                y: top + scale/2,
                width: w - scale,
                height: h - scale,
                opacity: fade
            },
            100: {
                x: left,
                y: top,
                width: w,
                height: h,
                opacity: 1
            }
        },
        listeners: {
            afteranimate: function () {                                        
            }
        }
    });
}

RR
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.