jQuery 애니메이션 CSS Border-Radius Property (Webkit, Mozilla)

Question

방법이 있습니까? jQuery CSS3를 애니메이션하기 위해 국경-라디우스 WebKit 및 Mozilla 브라우저에서 사용할 수 있습니까?

플러그인을 찾지 못했습니다.

-webkit-border-radius

-moz-border-radius

Answer 1

나는 원래 그와 같은 것을 기대했다.

$("selector")
  .css({borderRadius: 10});
  .animate({borderRadius: 30}, 900);

...작동 할 것이다. 하지만 나는 틀렸다 : WebKit은 당신이 세트 4 개의 코너에 대한 값 borderRadius, 그러나 위의 코드를 사용하면 애니메이션은 항상 10 대신 0에서 시작됩니다. 즉, 동일한 문제가 있습니다. Firefox ~ 할 것이다 다시 읽어 보자. 모든 것이 예상대로 작동합니다.

글쎄 ... Border-Radius는 일종의 구현 차이를 가지고 있습니다.

다행스럽게도 해결 방법이 있습니다. 각 모서리 반경을 개별적으로 지정합니다.

$("selector")
  .css({
    borderTopLeftRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 10, 
    borderBottomRightRadius: 10 })
  .animate({
    borderTopLeftRadius: 30, 
    borderTopRightRadius: 30, 
    borderBottomLeftRadius: 30, 
    borderBottomRightRadius: 30}, 900);

구형 브라우저와의 호환성을 유지하려면 전부로 이동하여 이전 브라우저 정제 된 이름을 사용할 수 있습니다.

$("selector")
  .css({
    borderTopLeftRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 10, 
    borderBottomRightRadius: 10,
    WebkitBorderTopLeftRadius: 10, 
    WebkitBorderTopRightRadius: 10, 
    WebkitBorderBottomLeftRadius: 10, 
    WebkitBorderBottomRightRadius: 10, 
    MozBorderRadius: 10 
  })
  .animate({
    borderTopLeftRadius: 30, 
    borderTopRightRadius: 30, 
    borderBottomLeftRadius: 30, 
    borderBottomRightRadius: 30,
    WebkitBorderTopLeftRadius: 30, 
    WebkitBorderTopRightRadius: 30, 
    WebkitBorderBottomLeftRadius: 30, 
    WebkitBorderBottomRightRadius: 30, 
    MozBorderRadius: 30 
  }, 900); 

그래도 이것은 꽤 미쳤다. 가능하면 피할 것입니다.

Answer 2

CSSHOOKS를 사용하십시오.

이것은 당신을 도울 것입니다 :

http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/

CSSHOOKS에 대한 링크 :

https://github.com/brandonaaron/jquery-csshooks

행운을 빕니다!

Answer 3

Juste 조언, 우리는 함수를 사용하여 브라우저의 CSS 접두사를 샘플 코드로 감지 할 수 있습니다 .. http://jsfiddle.net/molokoloco/f6z3d/