在鼠標上使用jQuery從左至右背景位置輸入幻燈片

Question

我有一個按鈕，要將其背景from #000 to #ccc 。 我的問題是如何在懸停或mouseenter上執行按鈕背景的幻燈片過渡。 可以用jQuery做到這一點嗎？ 非常重要，我不想使用背景圖片，因此所有有關圖片的建議都請跳過。

這是僅用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%;
}

TY。

Answer 1

該示例所做的是，它在按鈕上創建了一個線性背景，該背景跨越了按鈕高度的200％。 當鼠標移到該按鈕上時，它將背景向上移動200％。
我所更改的是將漸變從“頂部到底部”更改為“左至右”。 將寬度設置為200％，而不是高度，在懸停時，我將背景設置為右側200％。

我在這個JsFiddle中修復了它

我更改的內容如下：

background: linear-gradient(#111, #eee);
至
background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

background-size: 100% 200%;
至
background-size: 200% 100%;

和
background-position: 0 -200%;
至
background-position: -200% 0;

Answer 2

您可以使用:before和:after偽元素（與IE8兼容）來使其工作。 不需要jQuery。 只是CSS。

在這里查看此演示 。