Кружок, нарисованный при наведении указателя мыши на div

Question

Я искал этот вопрос, я нашел несколько ответов, но это не совсем то, что мне нужно.

Я не очень опытен с jquery, но я уже сделал функцию зависания! Когда я навису над div, он изменит размер. Что я хочу добавить к этому эффекту: на том же курсе вокруг изображения будет нарисован круг.

Я уже видел ответы, где люди добавляют радиус коробки. Но то, что я ищу, это то, что вы на самом деле видите кружок. Пример в 0:49 секунд (его немного случайно, но это видео показывает эффект мне нужно):

http://www.youtube.com/watch?feature=player_detailpage&v=jCdNnaTzItM#t=45s

Я надеюсь, что это возможно!

мой код:

$('li#balk1').hover(
    function(){ $(".ad").css('transform', 'scale(1.2)'); }, 
    function(){ $(".ad").css('transform', 'scale(1)'); } 
); 

Там должен быть круг вокруг «.ad»

Answer 1

заказа это Codepen (link) или он также доступен как gist (link)

Использование штриха SVG атрибутов мы анимировать линию SVG сгенерированную с рандом рассчитывается несовершенным кривым Безье. Я думаю, что это должно быть довольно близко к тому, что вы искали.

JQuery и D3 зависимостей

<style> 
path.ln { 
    stroke-width: 2px; 
    stroke: #999; 
    fill: none; 
    vector-effect: non-scaling-stroke; 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    -webkit-animation: dash 4s cubic-bezier(0.45,0.3,0.35,0.3); 
    -moz-animation:dash 4s cubic-bezier(0.45,0.3,0.35,0.3); 
    -o-animation:dash 4s cubic-bezier(0.45,0.3,0.35,0.3); 
    animation:dash 4s cubic-bezier(0.45,0.3,0.35,0.3); 
} 

@keyframes dash { 
    to { stroke-dashoffset: 0; } 
} 
</style> 

<script> 
function path(min_rad_delta,max_rad_delta, el_min, el_max, el_min_delta,el_max_delta) { 
    var d = Math.sqrt(0.5 * 0.5 + 1 * 1), r = 1; //returns the square root of a number 
    var el = (el_min + Math.random() * (el_max - el_min)) * Math.PI/180; 
    var path = 'M' + [r * Math.sin(el), r * Math.cos(el)] + ' C' + [d * r * Math.sin(el + Math.LN2), d * r * Math.cos(el + Math.LOG10E)]; 

    for (var i = 0; i < 4; i++) { 
     el += Math.PI/2 * (1 + el_min_delta + Math.random() * (el_max_delta - el_min_delta)); 
     r *= (1 + min_rad_delta + Math.random()*(max_rad_delta - min_rad_delta)); 
     path += ' ' + (i?'S':'') + [d * r * Math.sin(el - 0.45), d * r * Math.cos(el - 0.45)]; 
     path += ' ' + [r * Math.sin(el), r * Math.cos(el)]; 
    } 
    return path; 
} 

function cX(lambda_min, lambda_max, el_min, el_max) { 
    var el = (el_min + Math.random()*(el_max - el_min)); 
    return 'rotate(' + el + ') ' + 'scale(1, ' + (lambda_min + Math.random()*(lambda_max - lambda_min)) + ')'+ 'rotate(' + (-el) + ')'; 
} 
</script> 

<svg id="circle" width="50%" height="75%" viewBox='-1.5 -1.5 3 3'></svg> 

<script> 
d3.selectAll('svg') 
    .append('path') 
    .classed('ln', true) 
    .attr('d', path(-0.1,0, 0,360, 0,0.2)) 
    .attr('transform', cX(0.6, 0.8, 0, 360)); 
setTimeout(function() { location = '' } ,5000) 
</script> 

Answer 2

Хорошо, получается, что вы можете сделать это, я бросил вверх fiddle изменяющее this решение. Я полагаю, что он использует использование плагинов tween и curve, которые более подробно объясняются во второй ссылке.