過渡時的jQuery和背景漸變

Question

我正在嘗試在Jquery中滾動后應用背景漸變。 我在jsfiddle上做了一個基本的演示，但是問題出在野生動物園，它沒有重新應用漸變，並且在用戶滾開后我得到了純色。

http://jsfiddle.net/8C7JH/

這是我的jQuery代碼：

$(".default").mouseover(function() {
    $(this).css({ background: "#000" });         
});
$(".default").mouseout(function() {
$(this).css({ backgroundColor: "#1664b7",

background: "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkOGRkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzE5NzNjMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzE1NWViMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=)",

background: "-moz-linear-gradient(top,  #1d8dd4 0%, #1973c1 20%, #155eb2 90%)",

background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d8dd4), color-stop(20%,#1973c1), color-stop(90%,#155eb2))",

background: "-webkit-linear-gradient(top,  #1d8dd4 0%,#1973c1 20%,#155eb2 90%)",

background: "-o-linear-gradient(top,  #1d8dd4 0%,#1973c1 20%,#155eb2 90%)",

background: "-ms-linear-gradient(top,  #1d8dd4 0%,#1973c1 20%,#155eb2 90%)",

background: "linear-gradient(to bottom,  #1d8dd4 0%,#1973c1 20%,#155eb2 90%)",

filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d8dd4',   endColorstr='#155eb2',GradientType=0 )"


               });
});

我使用了http://www.colorzilla.com/gradient-editor/上的顏色漸變生成器來制作漸變。

任何幫助表示贊賞。 謝謝！

Answer 1

我在這里修改了您的jsfiddle： http ： //jsfiddle.net/PxCuw/

我無法測試它是否可以在Safari中使用，但是我不知道這種情況是如何開始的，因為它可以在chrome中使用。 基本上，現在只需要打開和關閉懸停類。 這將更易於維護/讀取/等。 它甚至可以解決Safari的問題（那里沒有承諾）。

HTML

本質上只是為默認和黑色之間的共享屬性添加了按鈕類

<div class="default button" id="btnOne">TEST 1</div>
<div class="default button" id="btnTwo">TEST 2</div>
<div class="default button" id="btnThree">TEST 3</div>

---

CSS

為按鈕和黑色添加了一個類。 按鈕用於共享屬性，黑色則用於懸停

.button {
    height: 30px;
    width: 80px;
    color:white;
}

.default {
    background-color: #1664b7;
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkOGRkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzE5NzNjMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzE1NWViMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d8dd4), color-stop(20%, #1973c1), color-stop(90%, #155eb2));
    background: -webkit-linear-gradient(top, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    background: -o-linear-gradient(top, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    background: -ms-linear-gradient(top, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    background: linear-gradient(to bottom, #1d8dd4 0%, #1973c1 20%, #155eb2 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d8dd4', endColorstr='#155eb2', GradientType=0);
}

.black {
    background-color:black;
}

---

JS

當您將鼠標懸停在上方時，它會刪除“默認”類，並在鼠標移出時添加與之相反的黑色類

$(".default").mouseover(function () {
    $(this).removeClass('default');
    $(this).addClass('black');
});
$(".default").mouseout(function () {
    $(this).removeClass('black');
    $(this).addClass('default');
});