항목의 배경색에 애니메이션을 적용하십시오 (디스플레이 블록)

Question

해당 웹 사이트 www.momkai.com에서 효과를 얻으 려합니다. 항목을 가져 가면 (리가 블록으로 표시되도록 설정 됨) 배경이 필요합니다. 색상은 왼쪽에서 오른쪽으로 움직입니다. 어떤 아이디어 그것을 달성하는 방법? 이미지없이 이상적입니다.

Answer 1

그들이하는 방식은 첫 번째 이미지 (흰색 - 검정색 텍스트)를 표시 한 다음 마우스 오버시 클립 (http://www.w3schools.com/css/pr_pos_clip.asp) 스타일의 두 번째 이미지 (검은 색 - 흰색 텍스트)가 첫 번째 맨 위에 있습니다.

Answer 2

가장 쉬운 배경 이미지를 사용하여 jQuery를 같은과 배경 위치를 애니메이션하지만, 노 - 이미지 옵션 같은 것을 사용하는 것입니다 :

<div> 
    <span>link text</span> 
    <div class="bgcolor"></div> 
</div> 

div { 
    position: relative; 
    background: #F00; 
    width: 200px; 
} 

div div.bgcolor { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    height: 100%; 
    width: 0px; 
    background: #FF0; 
} 

및 문서로드를

li.hover(function() { 
    $(this).children(".bgcolor").animate({width:"200px"}); 
}, function() { 
    $(this).children(".bgcolor").animate({width:"0px"}); 
}); 

Answer 3

CSS3 전환을 사용해 볼 수 있습니다. 그들은 꽤 잘 지원됩니다 http://caniuse.com/#search=transition

예 : http://jsfiddle.net/VirusZ/6VnTm/