2010-03-12 2 views
4

정확하게 처리하고 있는지 잘 모릅니다.attr() 콜백에서 함수를 수행 하시겠습니까?

var currentIMG; 
$('.leftMenuProductButton').hover(function() { 

    currentIMG = $("#swapImg").attr("src"); 
    var swapIMG = $(this).next(".menuPopup").attr("id"); 

    $("#swapImg").css("opacity", 0) 
        .attr("src", productImages[swapIMG], function(){ 
      $("#swapImg").fadeTo("slow", 1); 
    }); 

}, function() { 
    $("#swapImg").stop().attr("src",currentIMG); 
}); 

내가 0 (#swapImg)에 IMG 불투명도를 설정하면된다하려고, 다음, 그것은 src의 대체가 다시 페이드 그래서이 퇴색하는 것을 시도하고있다 : 여기

.js입니다. .attr()의 콜백을 사용하여 다시 로그인하십시오.

내가 잘못하고있는 경우이를 수행하는 더 좋은 방법을 설명해 주시겠습니까? 콜백에서이 작업을 수행하려는 이유는 새 이미지가 완전히로드 된 후에 만 ​​fadeTo가 필요하기 때문입니다. 그렇지 않으면 약간의 플래시가 발생합니다.

jQuery 1.4를 사용 중이며 http://jquery14.com/day-01/jquery-14에 따르면 .attr() 메소드에서 콜백을 수행 할 수있는 것으로 보입니다.

+0

#swampImg 콜백에서 $ (this)를 사용하여 $ ('# swapImg')를 참조 할 수 있습니다. – Catfish

답변

7

이 같은로드 이벤트와 함께이 작업을 수행 할 수 있습니다

$("#swapImg").css("opacity", 0).attr("src", productImages[swapIMG]) 
      .one("load",function(){ //fires (only once) when loaded 
       $(this).fadeIn("slow"); 
      }).each(function(){ 
       if(this.complete) //trigger load if cached in certain browsers 
        $(this).trigger("load"); 
      }); 

페이드 이미지로드 이벤트가 발생 후에 시작됩니다.

+0

허! 그것은 깔끔한 트릭입니다. (Out of votes. |) –

+0

예 첫 번째 버전을 실행했는데 Chrome이 캐시하고 있었고 작동하지 않는 것 같습니다. 이 버전이 작동합니다. – Jared

+0

그냥, 'fadeIn()'요소가'display : none'을 가지고 있고, 불투명도를 변경하는 것이 아니라 디자인되었다고 생각합니다. 'FadeTo()'만이 저에게 효과가있는 것 같습니다. 당신의 도움을 주셔서 감사합니다! – Jared

0
$("#swapImg").css("opacity", 0).attr("src", productImages[swapIMG]) 
     .on("load",function(){ //fires each time when image loaded 
      $(this).fadeIn("slow"); 
     }); 

이 또한 적절하게 적용됩니다.

관련 문제