Is jQuery unable to change the CSS3 box-shadow value?

Question

Background

I have a pair of functions I want to use to animate some navigation buttons. Basically, I want these buttons to look like buttons -- they have box-shadows enabled. And when the user clicks them, they depress -- which I figure can be shown by eliminating or reducing the box-shadows.

I'm pretty sure the functions are sound and the maps are properly formatted. But jQuery doesn't seem to be changing the box-shadow values. I tested, and it can change font color and background color and even another CSS3 attribute, border-radius:

$(document).ready(function(){
    $('div#forward,div#back').mousedown(function(){
        $(this).css({
            'color' : 'black',
            'background' : 'white',
            'border-radius' : '15px',
            'box-shadow' : '0px 0px 0px #444',
            '-moz-box-shadow' : '0px 0px 0px #444',
            '-webkit-boxshadow' : '0px 0px 0px #444',
        });
    });
    $('div#forward,div#back').mouseup(function(){
        $(this).css({
            'color':'white',
            'background':'#808080',
            'border-radius' : '5px',
            'box-shadow' : '1px 3px 6px #444',
            '-moz-box-shadow' : '1px 3px 6px #444',
            '-webkit-box-shadow' : '1px 3px 6px #444',
        });
    });
});

Questions

• Is there anything wrong with my script?

• If not, is there a workaround to get jQuery (or maybe just JavaScript) to manipulate box-shadows?

Answer 1

Just to add a bit of freshness to this question:
As from jQuery 1.8+ you can simply use (crossbrowser)

.css({ boxShadow: '1px 3px 6px #444' })

without adding the -browserVendor-specific prefixes

Answer 2

One of the string literals is missing a dash. Change '-webkit-boxshadow' to '-webkit-box-shadow' in the first .css() call.

Answer 3

If you want to use you can bind like this

$('#txtApproxFare').css('border-color', 'red')
$('#txtApproxFare').css('box-shadow', '1px red')

You can also use in single line and you can append along this

$('#txtApproxFare').css({'border-color':'red','box-shadow':'0px 0px 1px red'})