JQUERY CSS：是否可以通過JQuery觸發css過濾器？

我正在爲移動設備設置彈出式菜單，並希望網站在菜單彈出時模糊和變暗，並在關閉時恢復正常。我想通過觸發一個css過濾器讓我不確定在JQUERY中使用的正確語法是一個很好的方法。我更深入地研究了這個問題，到目前爲止，我還沒有找到jQuery中觸發的css過濾器的例子，所以我繼續玩它來看看我是否能夠使它工作，並且迄今爲止不成功。JQUERY CSS：是否可以通過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一個唯一的方法就會更乾淨然後將它們全部傳遞給變量或其他東西。

來源

2016-09-17 Optiq

您是否嘗試過爲css規則準備類，然後使用'addClass'和'removeClass'切換元素的類？ –

什麼限制你使用CSS類？ –

我同意使用class @Don Bhrayan Singh –

你的三個例子，第一個使用了正確的語法。問題是模糊不接受百分比值，只接受像素。將它們定義爲像素似乎對我具有預期的效果：

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

希望這有助於您！ :)

來源

2016-09-17 05:46:18

太棒了，它也適用於em。 :) – Optiq

爲什麼不是你指定並刪除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>

來源

2016-09-17 05:29:57

對不起，我剛更新了這個帖子來解決這個問題。原因是因爲它是一個div，我將其用作整個頁面的容器，並在每個頁面上使用它。所以我沒有給它一個ID，因爲到目前爲止，我不認爲我需要用ID來觸發它。所以我的第一個想法是用jquery調用類並修改css屬性，而不是通過它傳遞一堆不同的ID。 – Optiq

有兩個不同的問題。定位在何處應用更改（使用所需的任何選擇器）與獲取元素後完成的操作無關。我相信添加模糊風格的課程是您的最佳選擇。 – vals

JQUERY CSS：是否可以通過JQuery觸發css過濾器？

回答

相關問題