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

[Alex_D181]

Доброго времени суток.

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

<input id="speed-range" class="b-range" type=range  min=1000 value=4000 max=10000 step=1000>

И имеется некий SVG path, который необходимо анимировать, причем продолжительность анимации зависит от положения ползунка.

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

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')
                });
            }

[рони]

var speed = $('#speed-range').val();

item.animate({'stroke-dashoffset': "hide"}, speep, function(){

и так на всякий случай: матч сезона!!! в красном углу строка 5, в синем углу строка 9!!! кто победит? делайте ставки!

[рони]

Alex_D181,

если 'stroke-dashoffset': "hide" это у вас правильно

var item = $("#id");
var speed = $("#speed-range").val();
if (!item.data("animate")) item.animate({
    "stroke-dashoffset": "hide"
}, speed, function() {
    item.animate({
        "stroke-dashoffset": "show"
    }, 1, function() {
        item.data("animate", 0)
    })
}).data("animate", 1);