Как сделать круг на холсте, когда его контейнер наведен, граница круга увеличивается на несколько пикселей или предложений? - PullRequest
Новая
       12

Как сделать круг на холсте, когда его контейнер наведен, граница круга увеличивается на несколько пикселей или предложений?

1 голос
/ 27 июля 2011

http://jsfiddle.net/nicktheandroid/BcaW3/1/

Я пытаюсь создать "простую" версию canvas из моего примера jQuery.Когда контейнер наведен, граница абсолютно расположенного круга расширяется от 2 до 6 пикселей.Я видел, что Canvas намного более плавный и работает в ie9, тогда как переходы css3 не работают до ie10 (caniuse.com).Может кто-то указать мне верное направление?или привести меня к несколько простому примеру, который я мог бы попытаться обнаружить?или просто помогите мне создать что-то подобное?ЛЮБАЯ помощь очень ценится.

Я рассмотрел использование Рафаэля, чтобы сделать его приятным и плавным при анимации, но это такой большой вес для такого маленького эффекта.

У Jquery есть некоторые проблемы с анимацией, и мой пример выглядит немного неровно.Я не пытаюсь обязательно исправить мой пример (если он не сделал все анимации сразу, вместо того, что он делает сейчас, и это не выглядело так плохо), Canvas выглядит так, как будто он делает хорошие круглые круги и анимациякажется намного более гладким.Я также пытаюсь создать эффект упругости, когда граница увеличивается, но не когда она сжимается (если это возможно).Я не знаю, как это сложно сделать с Canvas или можно ли предложить другой способ.Большое вам спасибо.

1 Ответ

1 голос
/ 27 июля 2011

Две вещи.Во-первых, jQuery не полностью поддерживает анимацию сокращенных значений.Поэтому, когда вы анимируете свой "borderWidth", он должен анимировать 4 стороны по отдельности (Источник) .

Сокращенные свойства CSS (например, поля, фон, граница) не поддерживаются.Например, если вы хотите получить обработанную маржу, используйте: $ (elem) .css ('marginTop') и $ (elem) .css ('marginRight') и т. Д.

Во-вторых, я бы использовал margin над position элемента.

Кстати, зацените мой старый вопрос , чтобы найти другое решение для закругленного элемента с анимацией границ, возможно, это больше подходит вам (так как вам не нужно рисовать круг),И здесь есть более подробное объяснение.

Проверьте правильность эффекта на скрипте обновления .

Удачи.

...