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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

希望这有帮助！：）

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

2 个答案: