Как анимировать границу нажатой ссылки с jQuery?

Question

Я новичок в jQuery. Я пытался выяснить функцию анимации, и все же она все еще не работает.

То, что я пытаюсь сделать, очень просто. Есть эта ссылка. Если я нажму на нее, я должен увидеть границу вокруг нее. Но он не работает. Вот мой код

<a href="#">Click me</a> 

$(document).ready(function(){ 
    $('a').on('click', function(){ 
     $(this).animate({ 
      border-width: '2px' 
      }, 1000, function(){ 
       alert('It has worked'); 
     }); 
    }); 
}); 

Answer 1

Анимация только для живой численной собственности. Вы не можете анимировать цвет и стиль границы.

Взят с сайта JQuery:

Все анимированные свойства должны быть анимированы одного числового значением, за исключением случаев, указанными ниже; большинство свойств, которые не являются числовыми, не могут быть анимированы с использованием базовой функциональности jQuery (например, ширина, высота или левый могут быть анимированы, но фоновый цвет не может быть, если не используется плагин jQuery.Color()). Значения свойств обрабатываются как количество пикселей, если не указано иное. Единицы em и% могут быть указаны там, где это применимо.

jQuery animate API page

То, что я предлагаю вам сделать это, чтобы оживить только border-width и установить другие свойства в CSS файлах.

JS

$(document).ready(function(){ 
    $('a').on('click', function(){ 
     $(this).animate({ 
      'border-width': '2px' 
      }, 1000, function(){ 
       alert('It has worked'); 
     }); 
    }); 
}); 

CSS

a{ 
    border : 0 solid red; 
} 

Fiddle: http://jsfiddle.net/YQXr8/