CSS 배경 위치를 jQuery와 함께 사용하여 CSS 스프라이트 이미지를 희미하게 만드는 방법은 무엇입니까?

Question

CSS 스프라이트 이미지를 올바른 효과로 페이드하는 방법을 알아야합니다. 완전 불투명도 효과에 제로 불투명도를 적용하고 싶습니다.

내 예를 들어 있습니다 :

http://jsfiddle.net/CppV6/

그 버튼을 클릭 한 다음, 그 효과는 잘 보이지 않는다. 도움이 필요했는데 ...

고마워!

Answer 1

당신의 주된 문제는 당신이 단지 50 %의 불투명도로 변색되었다는 것이 었습니다. 지금 이것을 0 %의 불투명도로 변경했습니다.

또한 다른 tweeks 몇 개를 추가했습니다. 가장 중요한 두 번째 대기열에 'fadeTo'효과가 적용되어 배경 위치가 변경되면 스프라이트가 다시 사라집니다. 첫 번째 페이드가 완료되면이 버튼이 호출되어 내가 찾고있는 효과가 나타납니다.

또한 jQuery를보다 효율적으로 만드는 추가 작업을 수행하는 브라우저를 저장하기 위해 전역 변수에 $ ("# sprite") 선택기를 지정했습니다.

일반적으로 ID 및 클래스 이름을 소문자로 지정하는 것은 일반적으로 일반적입니다. 제목 케이스 이름을 알지 못하고 연령이 너무 오래 걸리는 이유가 무엇인지 파악하지 못합니다. 이 경우 소문자는 코딩 표준으로서 더 안전합니다.

$(function(){ 
    var $sprite = $('#sprite'); 
    $("button#Rainbow").click(function(){ 
    $sprite.fadeTo(200, 0, function() { 
     $sprite.css('background-position','0 0'); 
    }); 
    $sprite.fadeTo(200, 1); 
    }); 

    $("button#Esmerald").click(function(){ 
    $sprite.fadeTo(200, 0, function() { 
     $sprite.css('background-position','-152px 0'); 
    }); 
    $sprite.fadeTo(200, 1); 
    }); 

    $("button#Ruby").click(function(){ 
    $sprite.fadeTo(200, 0, function() { 
     $sprite.css('background-position','-303px 0'); 
    }); 
    $sprite.fadeTo(200, 1); 
    }); 
});