Gradient Filter on jQuery css() Method

Question

I tried change some style one of page, I want style to change with using jQuery - css() methodon userscript.

I tried on jsfiddle, my browser using Tampermonkey

Some attribute style changed but gradient filter not changed. here's is style on page :

#site-header .meta-header {
    width: 100%;
    min-width: 960px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-color: #1484ce;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF1484CE', endColorstr='#FF1274B5');
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1484ce), color-stop(100%, #1274b5));
    background-image: -webkit-linear-gradient(top, #1484ce 0%,#1274b5 100%);
    background-image: -moz-linear-gradient(top, #1484ce 0%,#1274b5 100%);
    background-image: -o-linear-gradient(top, #1484ce 0%,#1274b5 100%);
    background-image: linear-gradient(top, #1484ce 0%,#1274b5 100%);   
    -webkit-box-shadow: 0 2px 0 #0e5a8c;
    box-shadow: 0 2px 0 #0e5a8c;
    border-bottom: solid 1px rgba(255,255,255,0.1);
    font-size: 13px;
    }

And here's my userscript :

// ==UserScript==
// @name       Change Style
// @namespace  http://use.i.E.your.homepage/
// @include    http://fiddle.jshell.net/tAKHd/show/light/
// @version    0.1
// @description  enter something useful
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/


$("body").css({
    "background": "none",
    "background-color": "#2f2f2f"
});

$("#site-header .meta-header").css({
    "background-color": "#2c2c2c",

    /*start - This is style not showing*/

    "filter" : "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#333333', endColorstr='#222222')",
    "background-image": "-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333), color-stop(100%, #222))",
    "background-image": "-webkit-linear-gradient(top, #333 0%,#222 100%)",
    "background-image": "-moz-linear-gradient(top, #333 0%,#222 100%)",
    "background-image": "-o-linear-gradient(top, #333 0%,#222 100%)",
    "background-image": "linear-gradient(top, #333 0%,#222 100%)",

    /* end */

    "-webkit-box-shadow": "0 2px 0 rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1)",
    "box-shadow": "0 2px 0 rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1)",
    "border-bottom": "solid 1px rgba(255,255,255,0.1)"
});

How can I fix it?

Answer 1

Ok, I solved my problem

For solution :

var meta = $("#site-header .meta-header")
meta.css("background-image", "-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333), color-stop(100%, #222))");
meta.css("background-image", "-webkit-linear-gradient(top, #333 0%,#222 100%)");
meta.css("background-image", "-moz-linear-gradient(top, #333 0%,#222 100%)");
meta.css("background-image", "-o-linear-gradient(top, #333 0%,#222 100%)");
meta.css("background-image", "linear-gradient(top, #333 0%,#222 100%)");