2012-10-14 8 views
0

호버에서 일부 텍스트 페이드 인/아웃의 배경색을 만들고 싶습니다. 텍스트가 이미지 위에 있기 때문에 배경색이 투명성에서 퇴색하여 투명하게 되돌아 가고 싶습니다. 이 코드를 실행하면 처음 애니메이션을 적용하기 전에배경색을 투명하게/애니메이션으로 변환

$('#nav li.menu').hover(
    function() { 
     $(this).animate({backgroundColor: "#FFEF00"},300); 

    }, 
    function() { 
     $("li.menu").animate({backgroundColor: "Transparent"},300);   
    } 
); 

그러나, 애니메이션 흰색에 배경 색상을 전환 :

이것은 내가 지금까지있는 것입니다. 아무도 내가 이것을 고칠 수있는 방법을 알고 있습니까?

감사 MJ

모든 애니메이션 속성 단일 수치로 애니메이션되어야
+0

[jQuery UI] (http://jqueryui.com/animate/)가 포함되어 있습니까? – Giona

+0

http://jsfiddle.net/이 답변에 사용 되었다면 크게 감사하겠습니다. 나는 아직도 작업 데모가 정말 도움이 될 자바 스크립트를 배우고 있어요! – M2J

+0

예 jQuery UI가 포함되었습니다. – M2J

답변

0

예컨대, 폭, 높이를 들어 (기본 jQuery를 기능을 이용하여 애니메이션 수없는 비 수치, 또는 가장 좌측 특성이 될 수있다 애니메이션이지만 배경색은 jQuery.Color() 플러그인을 사용하지 않는 한 가능하지 않습니다. 달리 지정되지 않는 한 속성 값은 픽셀 수로 처리됩니다. 해당되는 경우 em 및 % 단위를 지정할 수 있습니다.

자세한 내용은 그 자체로 "투명"

http://api.jquery.com/animate/

http://desizntech.info/2009/06/playing-with-jquery-color-plugin-and-color-animation/

0

훨씬 의미하지 않는다 아웃이를 확인. 색상은 빨강, 녹색, 파랑 및 알파로 정의됩니다. 페이지의 기본 배경색은 흰색이므로 "투명"은 실제로 "흰색이 알파 0"으로 번역됩니다.

rgba() 표기법을 사용하여 특정 "투명"색상을 사용하십시오.

$("li.menu").animate({backgroundColor:"rgba(0xff,0xef,0,0)"}); 
0

실제로 afquin은 jquery를 통해 배경색을 쉽게 변경할 수 없습니다. 그러나 다른 방법이 있습니다! div에 텍스트를 넣고 div에 배경색을 지정하십시오. (또는 어떤 색상이되어야하는지)

그런 다음 CSS에 다른 클래스 나 ID를 만들고 jquery를 사용하여 호버의 클래스/ID를 변경하십시오. (당신이 알아야 할 경우 .getElement 명령)

행운을 빈다.

관련 문제