Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.12.2015, 16:43
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Анимация, сбросить width
Как у дива сбросить width после второго клика, ну т.е. когда ширина уменьшается надо сбросить elem.style.width = '', чтобы следующий клик увеличивал?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        div {
            height: 50px;
            width: 50px;
            background: #336699;
            cursor: pointer;
            border-radius: 5px;
            text-align: center;
            line-height: 50px;
            color: white;
            font-weight: bold;
            box-sizing: border-box;
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        var div = document.body.children[0];

        div.dataset.width = Math.round(div.offsetWidth / document.documentElement.clientWidth * 100);
        div.innerHTML = div.dataset.width + '%';

        div.onclick = function() {
            foo(this, 75);
        };

        function foo(elem, num) {
            if (elem.isAnimate) return;

            elem.isAnimate = true;

            var i = elem.style.width ? num : +elem.dataset.width,
                direction = elem.style.width ? -1 : 1;

            function bar() {
                elem.style.width = elem.innerHTML =  i + '%';
                
                i += direction;

                (i <= num && i >= +elem.dataset.width) ? requestAnimationFrame(bar) : elem.isAnimate = null;
            }

            requestAnimationFrame(bar);
        }
    </script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 16.12.2015, 17:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Decode,
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        div {
            height: 50px;
            width: 50px;
            background: #336699;
            cursor: pointer;
            border-radius: 5px;
            text-align: center;
            line-height: 50px;
            color: white;
            font-weight: bold;
            box-sizing: border-box;
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        var div = document.body.children[0], direction;

        div.dataset.width = Math.round(div.offsetWidth / document.documentElement.clientWidth * 100);
        div.innerHTML = div.dataset.width + '%';

        div.onclick = function() {
            foo(this, 75);
        };

        function foo(elem, num) {
            if (elem.isAnimate) return;

            elem.isAnimate = true;

            var i = elem.style.width != (num+'%') ? (direction = 1,+elem.dataset.width  ): (direction = -1,num );


            function bar() {
                elem.style.width = elem.innerHTML =  i + '%';

                i += direction;

                (i <= num && i >= +elem.dataset.width) ? requestAnimationFrame(bar) : elem.isAnimate = null;
            }

            requestAnimationFrame(bar);
        }
    </script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 16.12.2015, 18:35
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

рони, thanks
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с рандомными значениями злобная_пипа Элементы интерфейса 6 02.10.2015 20:11
CSS3 анимация (transition) Magneto Events/DOM/Window 4 19.12.2014 11:39
Последовательная анимация fire9999 Общие вопросы Javascript 4 02.11.2013 18:23
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35