페이드 아웃, 이미지 바꾸기 및 페이드 인

Question

이 스크립트에 몇 가지 문제가 있습니다. 작동하도록 도움을 주시면 감사하겠습니다. 먼저 오래된 이미지를 페이드 아웃 한 다음 동일한 시간에 페이드 인하는 새 이미지를로드합니다. 페이드 인을 사용하면 새 이미지가 대체되지 않습니다!

$("#image2").click(function() { 
    $("#portfolio").fadeOut('slow', function() { 
     $("#portfolio").attr("src", "Images/Portfolio/portfolio_strv.jpg", function() { 
      $(this).fadeIn(400); 
     }); 
    }); 
}); 

Answer 1

당신은 이미지의 onload 이벤트를 바인딩 한 다음 이미지를로드해야합니다.

$("#image2").click(function() { 
    $("#portfolio").fadeOut('slow', function() { 
     $(this).load(function() { 
      $(this).fadeIn(400); 
     }).attr("src", "Images/Portfolio/portfolio_strv.jpg"); 
    }); 
}); 

Answer 2

$("#image2").click(function() { 
    $("#portfolio").fadeOut('slow', function() { 
     $(this) // this refers to #portfolio 
      .attr("src", "Images/Portfolio/portfolio_strv.jpg") // change src 
      .load(function() { 
       // after load complete 
       // fade in the image 
       $(this).fadeIn(400); 
     }); 
    }); 
});​