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过滤器的信息来源都是值得欢迎的。

UPDATE

小提琴只是模仿我已经在我的网站正在与所以它并不清楚我试图影响该元素的代码。我有每个页面包装在一个有类名但没有ID的div。我没有给它一个id的原因是因为我在每个页面上反复使用它，所以我认为只要使用jquery来定位类并添加属性，而不是给每个div一个唯一的方法就会更干净然后将它们全部传递给变量或其他东西。

Answer 1

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

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

希望这有助于您！ :)

Answer 2

为什么不是你指定并删除clss而不是css，用类实现比较好，你也可以指定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>