jQuery 도구에서 fadeTo()를 fadeIn()으로 변경하는 데 문제가 있습니다

Question

저는 jQuery Tools Scrollable with this setup을 사용하고 있습니다. 큰 이미지에서 전환 효과를 변경하는 데 문제가 있습니다.

미리보기 이미지를 클릭하면 큰 이미지가 희미 해지고 희미 해집니다 (이 동작은 데모에서 visiting the link으로 볼 수 있음). 페이드 인 할 큰 이미지.

var wrap = ... fadeTo()에서 전환을 fadeIn()으로 변경하는 것처럼 간단하다고 가정했으나 그렇지 않습니다. 또한 wrap.fadeTo() 행의 전환을 변경했는데 작동하지 않았습니다.

왜 그런가? 나는

$(function() { 
    $(".scrollable").scrollable(); 

    $(".items img").click(function() { 
     if ($(this).hasClass("active")) { return; } 

     var url = $(this).attr("src").replace("_t", ""); 
     var wrap = $("#image_wrap").fadeTo("medium", 0.5); 
     var img = new Image(); 

     img.onload = function() { 
      wrap.fadeTo("fast", 1); 
      wrap.find("img").attr("src", url); 
     }; 

     img.src = url; 
     $(".items img").removeClass("active"); 
     $(this).addClass("active"); 
    }).filter(":first").click(); 
}); 

HTML

<div id="image_wrap">Large image goes here</div> 
<div class="scrollable"> 
    <div class="items"> 
     <div> 
      thumbnails go here 
     </div> 
    </div> 
</div> 

Answer 1

img은 무엇인가 ... 내 예제에서 불필요한 코드를 냈다? 그리고 이미로드 된 항목에 .load() 함수를 추가 할 수 없으며, 하나의 요소에 여러 .load() 함수를 추가하고로드하면로드됩니다. 이전에 바인딩 한 .load() 함수도 모두 호출됩니다.

.fadeTo() 메서드를 호출하기 전에 .stop(true, false)을 수행하지 않아도됩니다. 이미 페이딩이 중지되면 큐를 지우고 새 위치로 사라지기 때문입니다. 따라서 부분 적으로로드 될 때까지 기다릴 필요가 없습니다. 당신이 사용이에서 페이드 아웃,하지만 페이드하지 않으려면

업데이트

는 : 간결성에 대한

$(function() { 
    $(".scrollable").scrollable(); 

    $(".items img").click(function() { 
     if ($(this).hasClass("active")) { return; } 

     var url = $(this).attr("src").replace("_t", ""); 
     var wrap = $("#image_wrap"); // This line edited 
     var img = new Image(); 

     img.onload = function() { 
      wrap.css("opacity", 0.5).fadeIn(); // This line edited 
      wrap.find("img").attr("src", url); 
     }; 

     img.src = url; 
     $(".items img").removeClass("active"); 
     $(this).addClass("active"); 
    }).filter(":first").click(); 
});