How to apply same CSS property without overriding and multiple times using jquery?

How to apply same CSS property without overriding and multiple times using jquery?

$(function() {

  $("#hello").css({

    // Is there a way to apply both of these instead of having the second override the first?

    "background-image" : "-webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1,开发者_运维问答 #999999))",
    "background-image" : "-moz-linear-gradient(top, #444444, #999999)"

  });

});

Separate each 'directive' with a ;.

$("#hello").css({
    "background-image" : "-webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999));-moz-linear-gradient(top, #444444, #999999)"
});

Alternatively, put it into a single CSS class, and do it this much prettier and manageable way:

.gradient {
    -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999));
    -moz-linear-gradient(top, #444444, #999999);
}


$("#hello").addClass("gradient");