jQuery无法更改CSS3 box-shadow值吗?

wor*_*orc 5 css jquery css3

背景

我有一对功能,我想用它来动画一些导航按钮.基本上,我希望这些按钮看起来像按钮 - 它们启用了盒子阴影.当用户点击它们时,它们会压下 - 我可以通过消除或减少框阴影来显示.

我很确定这些功能是合理的,并且地图格式正确.但是jQuery似乎并没有改变盒子阴影值.我测试了,它可以改变字体颜色和背景颜色甚至是另一个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',
        });
    });
});
Run Code Online (Sandbox Code Playgroud)

问题

  • 我的剧本有什么问题吗?

  • 如果没有,是否有一种解决方法来获取jQuery(或者可能只是JavaScript)来操纵盒子阴影?

Rok*_*jan 21

只是为这个问题添加一些新鲜感:
从jQuery 1.8+开始你可以简单地使用(crossbrowser)

.css({ boxShadow: '1px 3px 6px #444' })
Run Code Online (Sandbox Code Playgroud)

不添加-browserVendor特定的前缀

  • 那很棒!你有找到的链接吗?或者链接到我应该填写的.css(属性)列表中的类似,每个CSS3花式属性(例如转换)? (7认同)

Mat*_*all 10

其中一个字符串文字缺少短划线.在第一个电话中更改'-webkit-boxshadow'为.'-webkit-box-shadow'.css()