jquery로 -webkit-filters 속성을 추가하는 방법

Question

id = sample 그레이 스케일 (0.6) 및 blur (5px)를 갖는 요소를 만들기 위해 다음 코드를 작성했습니다. 그러나 후자의 -webkit-filter 속성은 추가하는 대신 앞의 -webkit-filter 속성을 대신 사용합니다. 매번 하나의 -webkit-filter 속성 만 추가 할 수 있습니다. 흐림 효과를 회색 음영에 추가 할 수 있습니까? 최신 크롬을 사용하고 있음을 분명하게 밝히면 내비게이터에서 -webkit-filter가 작동합니다.

$('#grayscale').click(function() { 
    $('#sample').css({"-webkit-filter" : "grayscale(0.6)"}) 
}); 
$('#blur').click(function() { 
    $('#sample').css({"-webkit-filter" : "blur(5px)"}) 
}); 

Answer 1

기존 필터에 추가하거나 제거 할 수 있습니다. JQuery와의

$('#grayscale').on('click', function() { 
    var $sample = $('#sample'); 
    var new_filter = "grayscale(0.6)"; 
    var old_filter = $sample.css("-webkit-filter"); 
    if(old_filter.indexOf(new_filter) == -1){ 
     $sample.css("-webkit-filter", old_filter + ' ' + new_filter); 
    } 
    else { 
     $sample.css("-webkit-filter", old_filter.replace(new_filter, '')); 
    } 
}); 

http://jsfiddle.net/zzmJR/

Answer 2

일부 버전의 브라우저 특정 스타일을

추가에 실패하고 때로는 자바 스크립트 빠를 수 있습니다

VAR 샘플 = $ ('# 샘플'); sample.style.webkitFilter = "회색 음영 (0.6)";

Answer 3

가장 좋은 옵션은 공통 컨트롤러를 사용하는 것입니다. 이렇게하면 회색 음영 및 흐림 효과에 대해 다른 값을 적용 할 수 있습니다. 이상적으로는 요소를 한 번 클릭하는 대신 입력으로 수행해야합니다. 다음과 같은 것 :

var gValue = 0; 
var bValue = 0; 
$('#grayscale').click(function() { 
    gValue= 0.6; 
    change(); 
}); 
$('#blur').click(function() { 
    bValue = 0.5; 
    change(); 
}); 

function change(){ 
    var filter = "grayscale(" + gValue + ") blur(" + bValue + ")"; 
    $('#sample').css("webkitFilter", filter}); 
}