Как создать круг и при наведении на этот круг он должен стать больше

Question

Я хочу создать круг и при наведении на этот круг он должен стать больше.

Вот пример: http://www.ivanbayross.com/jquery_effect1/.

Вышеупомянутые работы идеально подходят для jQuery v1.7.1.

Я хочу, чтобы тот же код работал с jQuery v1.9.1.

Может кто-нибудь, пожалуйста, дайте мне знать, какие изменения я должен внести, чтобы заставить его работать с jQuery v1.9.1.

Любая помощь будет оценена по достоинству.

Answer 1

Давайте предположим, что мы имеем span набор для отображения в качестве элемента блока:

<span></span> 

span { display:block; } 

Круги в CSS можно легко сделать с помощью border-radius собственности.

span { 
    border-radius:100px; 
    border:100px solid #5ae; 
    width:0; 
    height:0; 
} 

Это создаст идеальный круг шириной в 100 пикселей (# 5ae).

Чтобы сделать это больше при наведении (mouseover), нам просто нужно использовать метод animate() jQuery. Увеличение border-radius и border-width до нужного размера:

$('span').on('mouseover', function() { 
    $(this).stop().animate({ 
     'border-width': 200, 
     'border-radius': 200 
    }, 500); 
}); 

Чтобы затем уменьшить это на mouseout, мы просто откатить изменения:

$('span').on('mouseout', function() { 
    $(this).stop().animate({ 
     'border-width': 100, 
     'border-radius': 100 
    }, 500); 
}); 

JSFiddle example.

Second JSFiddle example с использованием отдельных позиций радиуса вместо border-radius.

Third JSFiddle example изменение borderColor элемента с пользовательским интерфейсом jQuery (согласно комментариям).