Javascript JQUERY CSS：是否可以通过JQUERY触发CSS过滤器？

我正在为移动设备制作一个弹出式菜单，我希望当菜单弹出时，网站的不透明度会变模糊和变亮，关闭后会恢复正常。我认为一个很好的方法是触发一个css过滤器，这会导致我不确定在JQUERY中使用正确的语法。我进一步研究了这个问题，到目前为止，我还没有找到在jquery中触发css过滤器的例子，所以我继续玩它，看看是否可以让它工作，但到目前为止还没有成功

这是我想出的剧本

$("#menu").click(function(){
    $("#popup").fadeIn('slow');
    $("#close").css("display", "block");
    $("#menu").css("display", "none");
    $("p").css("opacity", 0.33);
    );

$("#close").click(function(){
    $("#popup").fadeOut('slow');
    $("#close").css("display", "none");
    $("#menu").css("display", "block");
    $("p").css("opacity", 1);
    });

我尝试添加css过滤器的方式是

//This one shows no sign of the blur working but opacity works
$("p").css({"opacity": "0.33",
            "filter": "blur(88%)",
            "-webkit-filter": "blur(88%)",
            "-moz-filter": "blur(88%)"
             });



//These two break the whole code from working at all
$("p").css({"opacity": "0.33",
            "filter: blur(88%)",
            "-webkit-filter: blur(88%)",
            "-moz-filter: blur(88%)"
            });

$("p").css({"opacity": "0.33",
            "filter: blur()" "88%",
            "-webkit-filter: blur()" "88%",
            "-moz-filter: blur()" "88%" 
             });

当然，这些都是我添加到“菜单”按钮的模糊尝试。这是一把小提琴

我越是找，什么也找不到，这让我怀疑这是否可能。也许是因为我不知道足够具体的东西来寻找相关的东西。欢迎任何关于在jquery中使用css过滤器的信息来源

更新

---

fiddle只是模拟了我在我的网站上使用的代码，所以我不清楚我试图影响的元素。我将每个页面包装在一个有类名但没有id的div中。我没有给它id的原因是因为我在每个页面上反复使用它，因此，我认为使用jquery以类为目标并以这种方式添加属性会更简洁，而不是给每个div一个唯一的id，然后将它们全部传递到一个变量或其他什么东西中。

为什么不分配和删除CLS而不是css，用类实现更好，您也可以分配CSS，但它需要更多的代码

$（文档）.ready（函数（）{
$（“p”）.addClass（“myClass”）；
});

.myClass{
不透明度：0.33；
滤镜：模糊（88%）；
-webkit过滤器：模糊（88%）；
-moz滤波器：模糊（88%）；
颜色：红色；
}
Sandip Patel
为什么不分配和删除CLS而不是css，使用类实现更好，您也可以分配css，但它需要更多的代码


$（文档）.ready（函数（）{
$（“p”）.addClass（“myClass”）；
});

.myClass{
不透明度：0.33；
滤镜：模糊（88%）；
-webkit过滤器：模糊（88%）；
-moz滤波器：模糊（88%）；
颜色：红色；
}
Sandip Patel
在您的三个示例中，第一个使用了正确的语法。问题是模糊不接受百分比值，只接受像素。将它们定义为像素对我来说似乎具有所需的效果：

$("p").css({
    "opacity": "0.33",
    "filter": "blur(1px)",
    "-webkit-filter": "blur(1px)",
    "-moz-filter": "blur(1px)"
})

希望这有帮助！：）
 在您的三个示例中，第一个使用了正确的语法。问题是模糊不接受百分比值，只接受像素。将它们定义为像素对我来说似乎具有所需的效果：

$("p").css({
    "opacity": "0.33",
    "filter": "blur(1px)",
    "-webkit-filter": "blur(1px)",
    "-moz-filter": "blur(1px)"
})

希望这有帮助！：）
 您是否尝试过为css规则准备类，然后用
addClass
和
removeClass
切换元素的类？是什么限制了您使用css类？我同意使用class@Don Bhrayan SinghI刚刚更新了帖子，说明了我为什么要这样做。感谢你们指出这一点。根据MDN，blur（）不接受百分比值。您是否尝试过将它们更改为像素值？您是否尝试过为css规则准备类，然后使用
addClass
和
removeClass
切换元素的类？什么限制了您使用css类？我同意使用class@Don Bhrayan SinghI刚刚更新了帖子，说明了我为什么要这么做对。感谢你们指出这一点。根据MDN，blur（）不接受百分比值。你试过把它们改成像素值吗？对不起，我刚刚更新了帖子来解决这个问题。原因是因为它是一个div，我使用它作为整个页面的容器，我在每个页面上都使用它。所以我没有给它一个id，因为到目前为止我认为我不需要用id触发它。所以我的第一个想法是用jquery调用类并修改css属性，而不是通过它传递一堆不同的id。有两个不同的问题。确定在哪里应用更改（使用您想要的任何选择器）与获得元素后所做的工作无关。我相信添加一个模糊风格的类是你最好的选择。对不起，我刚刚更新了帖子来解决这个问题。原因是因为它是一个div，我使用它作为整个页面的容器，我在每个页面上都使用它。所以我没有给它一个id，因为到目前为止我认为我不需要用id触发它。所以我的第一个想法是用jquery调用类并修改css属性，而不是通过它传递一堆不同的id。有两个不同的问题。确定在哪里应用更改（使用您想要的任何选择器）与获得元素后所做的工作无关。我相信添加一个模糊风格的类是你最好的选择。