불투명도를 변경하는 jquery가있는 데이터 필터

필터링 가능한 프로젝트가있는 사이트를 구축 중입니다. 기본적으로 필터링 된 클래스 내에서 요소의 불투명도를 변경하려고합니다. 따라서 '활성'클래스가있는 100 % 불투명도 요소와 '활성'클래스가없는 다른 모든 것에 대해 50 % 불투명도가 있습니다. 클릭시 각 요소가 위아래로 변합니다. 여기에 코드가 있습니다. 나는불투명도를 변경하는 jquery가있는 데이터 필터

$(document).ready(function() { 
    $('#filters li a').click(function() { 
    // fetch the class of the clicked item 
    var ourClass = $(this).attr('class'); 

    // reset the active class on all the buttons 
    $('#filters li').removeClass('active'); 
    // update the active state on our clicked button 
    $(this).parent().addClass('active'); 

    if(ourClass == 'all') { 
     // show all our items 
     $('#projects').children('li.two').show(); 
    } 
    else { 
     // 50% Opacity of all elements that don't share ourClass 
     $('#projects').children('li:not(.' + ourClass + ')').fadeTo('slow', 0.5, function(); 
     // !00% Opacity of all elements that do share ourClass 
     $('#projects').children('li.' + ourClass).fadeTo('slow', 1, function(); 
    } 
    return false; 
    }); 
});

출처

2013-03-15 user1337537

그래서 당신이 직면하고있는 문제는 무엇인가 ... 이것으로 내 머리를 긁적 해요 ?? – exexzian

저는 이것이 크로스 브라우저가 아니라는 것을 알고 있습니다 만, toggleClass()를 사용하고 -webkit-transition을 사용하는 것을 고려해 볼 수 있습니다 : 불투명도 0.5s; opacity : 0.5 ... attr ('class') 대신 hasClass ('all')를 사용하는 것을 고려하십시오. – captainclam

기본적으로 이것을 표시 및 숨기기로 사용할 수 있습니다. 하지만 내가하고 싶은 일은 모든 요소를 그대로 유지하고 '능동적 인'수업을받지 못하면 50 %로 퇴색하고 100 %까지 퇴색하는 것뿐입니다. 이해가 되니? – user1337537

$('#filters li a').click(function() { 
// fetch the class of the clicked item 
var ourClass = $(this).attr('class'); 

// reset the active class on all the buttons 
$('#filters li').removeClass('active'); 
// update the active state on our clicked button 
$(this).parent().addClass('active'); 

if(ourClass == 'all') { 
    // show all our items 
    $('#projects').children('li.two').animate({opacity:1}, 400); 
} 
else { 
    // hide all elements that don't share ourClass 
    $('#projects').children('li:not(.' + ourClass + ')').animate({opacity:0.15}, 400); 
    // show all elements that do share ourClass 
    $('#projects').children('li.' + ourClass).animate({opacity:1}, 400); 
} 
return false; 
});`

출처

2013-03-18 00:49:08 user1337537

이것은 내 작품이었습니다 ... – user1337537

불투명도를 변경하는 jquery가있는 데이터 필터

답변

관련 문제