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

Question

我正在为移动设备开发一个弹出菜单，并希望网站在菜单弹出时模糊和不透明度变亮，并在菜单关闭时恢复正常。我想一个好方法是触发一个 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%" 
             });

当然，这些是我添加到“菜单”按钮中的模糊效果的尝试。这是它的小提琴https://jsfiddle.net/Optiq/hsvvpfzu/5/

我越看越找不到任何东西，这让我怀疑这是否可能。也许只是我不知道足够具体的东西来搜索以找到相关的东西。欢迎任何有关在 jquery 中使用 css 过滤器的信息来源。

更新

小提琴只是模拟了我在我的网站上使用的代码，所以不清楚我试图影响的元素。我将每个页面都包装在一个具有类名但没有 id 的 div 中。我没有给它一个 id 的原因是因为我在每个页面上一遍又一遍地使用它，所以我认为只使用 jquery 来定位类并以这种方式添加属性而不是给每个 div 一个唯一的id 然后将它们全部传递给变量或其他东西。

Answer 1

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

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

希望这会有所帮助！ :)

Answer 2

为什么不分配和删除 clss 而不是 css，用 class 实现更好，你也可以分配 CSS，但它需要更多代码。

$(document).ready(function(){
$("p").addClass("myClass");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
  .myClass{
    opacity: 0.33;
    filter: blur(88%);
    -webkit-filter:blur(88%);
     -moz-filter: blur(88%);
    color:red;
  }
 </style>
 
<p>Sandip Patel</p>