Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
0 / 0 / 1
Регистрация: 26.01.2014
Сообщений: 29

Изменение скорости анимации в зависимости от положения ползунка range

03.08.2015, 14:55. Показов 2307. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток.

Имеется ползунок

HTML5
1
<input id="speed-range" class="b-range" type=range  min=1000 value=4000 max=10000 step=1000>
И имеется некий SVG path, который необходимо анимировать, причем продолжительность анимации зависит от положения ползунка.

Проблему пытался решить так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
            var item = $("#id"");
            var speed = $('#speed-range').val();
 
            if(item.attr('data-animate')){
                item.animate({'stroke-dashoffset': "hide"}, speep, function(){
                    //Помечаем элемент, чтобы не запускать его уже раз
                    item.attr('data-animate', '1');
                    console.log(speed)
                }).animate({'stroke-dashoffset': "show"}, 1, function(){
                    //Помечаем элемент, как свободный
                    item.attr('data-animate', '0')
                });
            }
Но, к сожалению, скорость анимации не изменяется, несмотря на то, что значение speed изменяется
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
03.08.2015, 14:55
Ответы с готовыми решениями:

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

Плавное изменение положения ползунка
Доброй ночи! Такая вот задача, не знаю как решить. Использую vertical slider из jquery ui, мне нужно по нажатию кнопки плавно переместить...

Изменение скорости анимации
Как сделать чтоб анимация из ( из 3 картинок ) меняла скорость с помощью ползунка trackBar1_Scroll using System; using...

2
312 / 106 / 69
Регистрация: 18.04.2015
Сообщений: 346
03.08.2015, 16:52
Цитата Сообщение от di-power Посмотреть сообщение
item.animate({'stroke-dashoffset': "hide"}, speep, function(){
speep Наверно поэтому
0
0 / 0 / 1
Регистрация: 26.01.2014
Сообщений: 29
04.08.2015, 07:42  [ТС]
Armi, к сожалению, причина не в этом...

это я просто в примере описался

Вот пример http://codepen.io/anon/pen/zGyQWP

При этом, если убрать speed в animate() и подставить значение, то скорость анимации ихменится

Добавлено через 8 минут
UPD Проблему решил. Оказалось, что данные от инпута передавались в виде строки, что логично. преобразование типа переменной помогло. Рабочий пример лежит по ссылке сверху

Добавлено через 5 минут
точнее вот рабочий пример: http://codepen.io/anon/pen/VLqOdq
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
04.08.2015, 07:42
Помогаю со студенческими работами здесь

Изменение z-index в зависимости от положения элементов
Добрый день. Как на jQuery организовать чтобы чем элемент правее находится в блоке тем выше у него z-index (элементы можно двигать). Нужно...

Изменение цвета фигуры в зависимости от положения на форме
Условие такое. Есть формула по изменению цвета(в данном случае от жёлтого к красному): RGB(255,(255*(x-xo)/(xmax-xo); В формуле ниже за...

Изменение положения блока в зависимости от разрешения экрана
Всем привет, такая проблема возникла. Есть на сайте див блок при нормальных разрешениях отображается как надо, а при 1366х768 сьезжает в...

Изменение класса элемента в зависимости его положения относительно другого
Добрый день, стояла задача написать скрипт: когда элемент A достигнет позиции элемента B, добавится определенный класс элементу B. Сам...

Изменение положения объектов на странице в зависимости от ширины видимой области
Доброго времени суток! При верстке сайта столкнулся с одной проблемой: мне нужно, сделать, чтобы, как только достигалась определенная...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru