JQuery не может изменить значение box3 shadow в CSS3?

Question

Фон

У меня есть пара функций, которые я хочу использовать для анимации некоторых кнопок навигации. По сути, я хочу, чтобы эти кнопки выглядели как кнопки - у них включены теневые рамки. И когда пользователь щелкает их, они нажимают - что, как я полагаю, можно показать, убрав или уменьшив тени от ящиков.

Я почти уверен, что функции в порядке, а карты правильно отформатированы. Но jQuery, похоже, не меняет значения box-shadow. Я протестировал, и он может изменить цвет шрифта и цвет фона и даже другой атрибут CSS3, 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',
        });
    });
});

Вопросы

• Что-то не так с моим сценарием?

• Если нет, то есть ли обходной путь для получения jQuery (или, может быть, просто JavaScript) для манипулирования тенями box?

Answer 1

Просто добавьте немного свежести в этот вопрос:
Начиная с jQuery 1.8+, вы можете просто использовать (crossbrowser)

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

без добавления префиксов -browserVendor

Answer 2

В одном из строковых литералов отсутствует тире. Измените '-webkit-boxshadow' на '-webkit-box-shadow' при первом вызове .css().

Answer 3

Если вы хотите использовать, вы можете связать как это

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

Вы также можете использовать в одну строку, и вы можете добавить вдоль этого

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