LINUX.ORG.RU
решено Форум — Web-development  

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

 


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)

Ответ на: комментарий от RR

Я попробовал через timeout, но у меня завис фокс и начал жрать память. Делал так: 

   while (W != 163)
   {
    W++;
    timeout(SIZET, 50);
    document.getElementById('tray').style.width = W + 'px';
   }

AlexCones ★★★
() автор топика

«Монструозная» jquery выстраивает твои анимации в очередь, следит, чтобы они не перекрывались, позволяет использовать разные функции перемещения, кроме линейной и все это в куче браузеров. А в современных браузерах ценой еще пары килобайт можно делать вот такие штуки: http://ricostacruz.com/jquery.transit/

Ну а если все еще хочется изобрести велосипед, то посмотри как в той же jquery сделано: https://github.com/jquery/jquery/blob/master/src/effects.js

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

Вы когда в туалет идете, надеваете на себя шубу и валенки, чтобы по дороге не замерзнуть? Зачем мне очередь перемещения, нелинейная анимация и прочие ненужные рюшечки, если анимация происходит однократно по клику, изменяя всего лишь значение width одного элемента, при этом никаких других операций за эти 250 мс не произойдет.

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

Очевидно что 30 килобайт один раз отдать пользователю(или не отдать если с CDN) дешевле чем насиловать себя.

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

Не дешевле, потому, что я всегда ориентируюсь на таких же диалапщиков, как я сам. Поэтому стараюсь обходиться без изображений, делая все средствами css, поэтому экономлю на грошах, потому, что знаю, каково это - каждый раз ждать больше минуты, пока загрузится очередное поделие на jquery.

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

Ну то что у тебя и авторов сайтов которые ты посещаешь кривые руки не говорит о том что jquery не подходит для твоей задачи.

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

В браузерах однопоточная модель выполнения JavaScript. Пока твой кусок кода не завершится, ничего не перерисуется и страница будет «висеть». Тебе надо не циклы вертеть по несколько секунд а выполнять работу быстрыми порциями. Как - тебе уже показали.

Legioner ★★★★★
()
Ответ на: комментарий от AlexCones 
<html>
<head>
    <script type="text/javascript">
        function animate_width(id) {
            var el = document.getElementById(id),
                animFunc = function () {
                    var w = parseInt(el.style.width),
                        newW = w + 1;

                    if (newW <= 100) {
                        el.style.width = newW + 'px';
                        setTimeout(animFunc, 5);
                    }
                };

            if (el) {
                animFunc();
            }
        };

    </script>
</head>
<body>
<div id="test" style="width: 50px; height: 50px; border: solid 1px;">
Foo bar
</div>
<div onclick="animate_width('test');">Start</div>
</body>
</html>

|Или изучите сабж язык, или пользуйте jquery

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

А процессоры у всех диалапщиков 16гГцовые? Иначе, почему ты в каждой строке заново ищешь по дому один и тот-же элемент?

Прочитай уже носорога же.

Kalashnikov ★★★
()
Ответ на: комментарий от RR 
function SIZETRAY()
{
 var tray = document.getElementById('tray');
 var arrow = document.getElementById('tray-arrow');
 var W = tray.clientWidth;

 _INCREASE = function()
 {
  if (W < 163)
  {
   W = W + 3;
   tray.style.width = W + 'px';
   setTimeout(_INCREASE, 5);
  }
 }

 _DECREASE = function()
 {
  if (W > 85)
  {
   W = W - 3;
   tray.style.width = W + 'px';
   setTimeout(_DECREASE, 5);
  }
 }

  if (W == 85)
  {
   arrow.innerHTML = '&#9656';
   arrow.style.left = '3px'; 
   _INCREASE();
  }
  else
  {
   arrow.innerHTML = '&#9666';
   arrow.style.left = '1px';
   _DECREASE();
  }
}

Говнокод?

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

переменные лучше объявить заранее - 

var = ....,
    _INCREASE,
    _DECREASE;
А так, как для разового кода, все нормально. Когда будет повторяться такая анимация тогда можно будет подумать про рефактор.

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

Приличные люди не объявляют переменные и функции в апперкейсе.

Также в яваскрипте принято отступать 4 (или 2) символами и не переносить фигурную скобку блоков на след. строку.

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

Если продолжать придираться, константы захардкодены, что не хорошо. Если понадобится блок сделать на пиксель шире, придётся всё пересчитывать (а из-за условия W == 3 всё вообще поломается).

И имхо, с setInterval было б понятней. Да и вообще, увеличение и уменьшение отличаются только знаком, можно и объединить.

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

Смысл от них вне основной функции?

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

Так лучше? 

function SIZETRAY()
{
 var _CHANGE;
 var tray = document.getElementById('tray');
 var arrow = document.getElementById('tray-arrow');
 var W = tray.clientWidth;
 var _LIMIT;
 var _STEP;

 _CHANGE = function()
 {
  if (W != _LIMIT)
  {
   W = W + _STEP;
   tray.style.width = W + 'px';
   setTimeout(_CHANGE, 5);
  }
 }

  if (W == 85)
  {
   arrow.innerHTML = '&#9656';
   arrow.style.left = '3px';
   _LIMIT = 163;
   _STEP  = 3;
   _CHANGE();
  }
  else
  {
   arrow.innerHTML = '&#9666';
   arrow.style.left = '1px';
   _LIMIT = 85;
   _STEP  = -3;
   _CHANGE();
  }
}

И да, сначала написал так: _CHANGE = function(_LIMIT, _STEP) и отправлял параметры сразу. Но почему-то срабатывало сразу, без промежуточной отрисовки (вот он 85, через долю секунды - 163). Когда изменил на текущий вариант, все заработало. Почему так?

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

Ну не ширина, так скорость.

AlexCones

Но почему-то срабатывало сразу, без промежуточной отрисовки

Хз, может из-за того что ты рекурсивно (или стоп, это не рекурсия же) её же потом и вызываешь без аргументов? Потому мне и кажется что с интервалом тут проще чем с кучей таймаутов.

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

Я не менял его, когда вызывал с аргументами и без оных. Без аргументов - анимация, с ними - один шаг. Вклинивал внутрь _CHECK alert со всеми переменными - они как и надо, возрастают по шагам.

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

Нет. Я имел ввиду, что в C/C++ точка с запятой обязательна в конце стейтментов, а в js не всегда обязательна, из-за чего перенос фигурной скобки может иметь с первого взгляда неожиданный эффект.

Пример из википедии: 

return
{ 
    status: "complete"
};

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

Экономия на спичках брат. По статистике таких диалапщиков очень мала, ты хочешь проект написать или благотворительностью заниматься? Такие вещи нужны только в образовательных целях

spiritkhl ★
()

Г-ди, отберите у людей жаваскрипт и выдайте жквери с мануалом, тем кто не может.

А вообще есть CSS transitions & transformations.

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

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

четыре килобита диалап?

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

По статистике таких диалапщиков очень мала

По статистике таких линуксоидов очень мала. Ты хочешь компом пользоваться или благотворительностью заниматься? Такие вещи нужны только в образовательных целях.

Суть ясна?

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

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

Eddy_Em ☆☆☆☆☆
()
Ответ на: комментарий от Eddy_Em

Как раз таки нативный код монструазен, а jQuery его делает куда проще и читаемей. Чего только стоит $('tag') вместо document.getElementsByTagName('tag').

Хотя бесспорно, если нужно только пару функций, она не нужна. Но это явно не случай ТС.

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

jQuery его делает куда проще и читаемей

Во-первых, попробуй-ка прочесть исходники этого jQuery, а во-вторых, качать приходится намного больше.

Чего только стоит $('tag') вместо document.getElementsByTagName('tag').

Ой, как сложно в своем коде сделать функцию 

function $(Id){
	return document.getElementById(Id);
}

Хотя бесспорно, если нужно только пару функций, она не нужна. Но это явно не случай ТС.

Это явно случай ТС. Выше уже понаприводили уйму примеров кода. Причем кода достаточно компактного и простого.

Eddy_Em ☆☆☆☆☆
()
Ответ на: комментарий от Eddy_Em

Eddy_Em

Во-первых, попробуй-ка прочесть исходники этого jQuery

А что там такого? Или ты минифицированную пытался читать? Она кстати всего 32 кб, притом сразу же уйдёт в кэш, а если юзать CDN, то скорее всего итак уже там.

А вообще, мы про разные вещи похоже, я говорил о коде который получается с jQuery. Например вся возня с плавным изменением блока с jQ нивелировалась бы одним вызовом.

Ой, как сложно в своем коде сделать функцию

И ещё по одной на класс и тег, ага? А с комбинацией как быть? Тогда уж querySelector лучше.

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

А что там такого?

Девять с лишним тысяч строк кода для веб-библиотеки - это дебилизм чистой воды!

я говорил о коде который получается с jQuery

А я - о том, что пользователю приходится грузить ненужные данные ради такого выпендрежа «веб-программиста».

И ещё по одной на класс и тег, ага?

А на класс и тег не нужно. Id'а хватит за глаза. А в редких случаях можно и целиком писать.

Eddy_Em ☆☆☆☆☆
()
Ответ на: комментарий от 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 ★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development