마우스로 jQuery로 왼쪽에서 오른쪽으로 백그라운드 위치로 슬라이드 입력

Question

배경을 슬라이드하려는 버튼이 있습니다 from #000 to #ccc. 문제는 마우스를 올리거나 마우스를 가져갈 때 버튼 배경의 슬라이드 전환을 수행하는 방법입니다. jQuery로이 작업을 수행 할 수 있습니까? 매우 중요합니다. 저는 배경 이미지를 사용하여 이미지에 대한 모든 제안을하고 싶지 않습니다. 스킵 pls.

이것은 CSS로만 만든 성가신 바이올린이지만 꼭 필요한 방식으로 위에서 아래로, 그리고 왼쪽에서 오른쪽으로는 작동하지 않습니다. http://jsfiddle.net/xu3ck/166/

<a href="#" class="btn two">Submit Form</a> 

.btn { 
    width: 180px; 
    text-decoration: none; 
    height: 40px; 
    border-radius: 10px; 
    text-align: center; 
    color: white; 
    line-height: 40px; 
    font-size: 20px; 
    font-family: arial, sans-serif; 
    margin: 20px; 
    float: left; 
    display: block; 
    color: white; 
    box-shadow: rgba(0,0,0,0.3) 1px 1px 3px inset; 
} 



.two { 
    background: linear-gradient(#111, #eee); 
    background-repeat: repeat; 
    background-size: 100% 200%; 
    transition: all .5s linear; 
} 

.two:hover, .two:focus, .two:active { 
    background-position: 0 -200%; 
} 

타이.

Answer 1

예를 들어 설명하면 버튼의 200 %에 걸쳐있는 liniar 배경이 만들어집니다. 마우스가 버튼 위로 이동하면 배경이 200 % 위로 이동합니다.
필자가 변경 한 것은 그라디언트를 "위에서 아래로"에서 "왼쪽에서 오른쪽으로"변경 한 것입니다. 너비를 높이 대신 200 %로 설정하고 마우스를 올리면 배경이 200 % 오른쪽으로 설정됩니다.

background: linear-gradient(#111, #eee);

background-size: 200% 100%;

012,351으로 background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

background-size: 100% 200%;

에 :

나는 내가 변경하면 다음과 같은 한이 JsFiddle

에 고정 6,

그리고
background-position: 0 -200%;
background-position: -200% 0;

Answer 2

에 당신은 IE8과 호환되는 :before 및 :after pseudoelements, 작업을 할 수 있습니다. jQuery가 필요하지 않습니다. 그냥 CSS.

See this demo here.