Блог

Главная - Вопросы по программированию - Анимировать диаграмму jQuery, изменяя rel при наведении

Анимировать диаграмму jQuery, изменяя rel при наведении

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь модифицировать плагин jQuery knob для использования в качестве анимированной диаграммы.

Это то, что у меня есть на данный момент:

HTML:

 <ul id="chart">
<li rel="100">Cats</li>
  

 <input class="knob animated donut" value="0" rel="70" />

Javascript:

 $('.knob').each(function () {
var $this = $(this);
var myVal = $this.attr("rel");
$(this).knob({
    readOnly: true,
    displayInput: false,
    bgColor: "cccccc",
    fgColor: "e60022"
});
       $({
           value: 0
       }).animate({

           value: myVal
       }, {
           duration: 1000,
           easing: 'swing',
           step: function () {
               $this.val(Math.ceil(this.value)).trigger('change');

           }
       })
   });

$('#chart > li').mouseover(function(){    
    $('#donut').text($(this).attr('rel'));
});

Я хотел бы иметь возможность навести курсор на <li> элемент и использовать rel значение, чтобы применить его к диаграмме. Я думаю, мне, возможно, потребуется включить некоторые JS, чтобы также перерисовывать диаграмму при наведении курсора мыши, но я не уверен, как это сделать (у меня не так много знаний JS).

Приветствуется любая помощь.

Комментарии:

1. Вот так: jsfiddle.net/robertrozas/pMJmF/27 ??

2. @RobertRozas для меня это ничего не дает?

3. В строке 26 кода JavaScript в примере Роберта Розаса изменение $('#donut') на $('.donut') , кажется, заставляет его работать, но не onmouseover .

4. @DanielGulliver Ах да, я вижу здесь ошибку. Есть идеи о том, как заставить это работать?

Ответ №1:

ДЕМОНСТРАЦИЯ

Вам нужно установить свойства анимации в обработчике событий. Итак, инициализируйте свой элемент «knob», как вы это делали, затем в обработчике событий извлеките значения и запустите анимацию.

В демонстрации я использовал атрибут data (для меня это просто имеет больше смысла), а не атрибут rel, но следующее должно работать с вашей разметкой:

 var donut = $('.knob');    
donut.knob({readOnly: true,
    displayInput: false,
});
$('#chart > li').on('mouseenter', function(){    
    var myVal = $(this).attr('rel'); 
    donut.stop().animate({value: myVal}, {
           duration: 200,
           easing: 'swing',
           step: function () {
               donut.val(Math.ceil(this.value)).trigger('change');
           }
    });
});

HTML: измените входные данные, чтобы использовать атрибуты данных для цвета, поскольку в FF есть ошибка

 <input class="knob" data-fgColor="#e60022" data-bgColor="#ccc" value="" />

Комментарии:

1. Большое спасибо. Единственная проблема, с которой я сталкиваюсь, заключается в том, что она работает очень медленно, как только я добавляю еще несколько значений. Есть предложения по повышению скорости? jsfiddle.net/xx2Ky/3

2. Дело не в том, что это становится медленным само по себе. Дело в том, что общая разница в значениях между каждым изменением меньше, но продолжительность, в течение которой оно анимируется, неизменна. Подумайте об этом так: анимация от 0-100 (360 градусов) в течение 1000 мс будет выглядеть намного быстрее, чем 0-10 (36 градусов) в течение 1000 мс. Вы определенно можете сократить продолжительность, чтобы помочь (попробуйте вместо этого 200). Для большего улучшения вы могли бы: изменять длительность в зависимости от процента изменения; всегда сбрасывать значение на 0 перед изменением значения; или добавить другую визуальную очередь, такую как displayInput, которая обманывает глаз, заставляя видеть больше движения.

3. Вот пример, использующий все концепции, которые я описал выше: jsfiddle.net/jme11/xx2Ky/5 Обратите внимание, насколько «быстрее» и отзывчивее она кажется, хотя изменения значений иногда даже меньше 10.

4. Внимание!!! Я нахожусь на MAC, и я только что заметил, что в плагине есть ошибка (не в моем коде). При тестировании в Firefox, если вы укажете значения цвета в параметрах инициализации, произойдет полный сбой. Кроме того, мне показалось странным, что в Chrome и Safari цвет переднего плана неправильно применялся к входному значению. Я настоятельно рекомендую вам вместо этого задать цвета в разметке следующим образом: <класс ввода=»dial» data-fgColor=»#e60022″ data-bgColor=»#ccc» value=»» />. Я обновил скрипку здесь: jsfiddle.net/jme11/xx2Ky/6 Теперь это надежно работает во всех моих браузерах.

5. Идеальный. Есть ли способ заставить его отменить любую активную анимацию при наведении курсора мыши? Кажется, что она продолжает работать, если вы наведете курсор мыши на несколько <li> секунд, что выглядит немного глючно. Большое спасибо, вы просто находка!