2010-12-28 4 views
2

나는 이미지 주위에 회색 오버레이로 화면의 중앙에 특정 클래스의 이미지를 표시하는 간단한 jQuery 플러그인을 작성하고있다. 오버레이를 클릭하면 사라집니다. 이제이 코드를 사용합니다.jQuery .add method

$("#overlay").click(function(){ 
     $(this).animate({ 
      opacity: "0" 
     }, 500, function(){ 
      $(this).css({ 
       display: "none" 
      }); 
     }); 

     $("#imgcontainer").animate({ 
      opacity: "0" 
     }, 500, function(){ 
      $(this).css({ 
       display: "none" 
      }); 

     }); 

    }); 

imgcontainer는 이미지를 보유하고 있습니다. 이 쉬운 코드를 사용하려고했지만 작동하지 않습니다.

$("#overlay").click(function(){ 
     $(this).add("#imgcontainer").animate({ 
      opacity: "0" 
     }, 500, function(){ 
      $(this).css({ 
       display: "none" 
      }); 
     }); 
    }); 

왜 작동하지 않습니까?

UPDATE :
올바른 코드 :

$("#overlay").click(function(){ 
     $("#imgcontainer").add(this).fadeOut(); 
    }); 

감사 답변에 대한 많은. 이 동작 (버그?)은 실제로 매우 놀랍습니다.

답변

3

issue #7853 때문에 v1.4.x를 사용하고 있다면 방금 전에 버그 추적기를 만들었습니다 (어떤 타이밍!).

$(this).add("#imgcontainer").animate(... 

$(this).add($("#imgcontainer")).animate(... 

업데이트에 : :이 변경하여 문제를 해결할 수 닉 아래 지적 여기에 더 나은 (더 효율적으로) 방법이있다 :

$("#imgcontainer").add(this).animate(... 

(fadeOut에 대한 그의 참고 사항을 참조하십시오.)

jQuery 1.3.2 및 이전 버전에서는 예상대로 작동했을 것입니다. 나는 1.4.x가 버그인지 아니면 의도적으로 호환되지 않는 변화인지 모른다.

질문 : 질문 : 컨테이너를 페이드 아웃하지 않는 이유는 무엇입니까? 그것이 이미지를 포함하고 있다면, 이미지 역시 희미 해져야합니다. 그렇지 않을까요? this example에서와 같이? (나는 애니메이션을 많이하지 않으므로 미묘한 것을 놓친다면 사과합니다.)#overlay는 이미지였습니다. 내 생각에는 잘못된 가정이었습니다.

+2

'.fadeOut()'은 끝에'display : none'을 설정하므로'$ ("# imagecontainer") .add (this) .fadeOut()'가 작동해야합니다. 문제의 +1을 할 수 있다면 버그 신고에 +2를 부탁합니다. –

+0

@ 닉 (Nick) : 재정렬에 대한 좋은 지적은 그것을 고치는 더 효율적인 방법입니다. 그리고 감사합니다. :-) 나는이 일을 겪었을 때 나는 오늘 일찍 머리를 꺼내고 있었다. –

+0

J. -이 시점에서'.add (selector, context)'가 추가되었을 때 의도적이었습니다. 버그가 아니기 때문에 닫힐 것입니다. –