대표, JQuery와 관련된 질문/jQuery를

Question

를 교체하고 페이드 - 그래서 같은 썸네일 목록과 썸네일을 클릭에 전환 관련된 큰 이미지 - 내가 조금 갤러리 스타일의 스크립트 작업이 있습니다

이

$('#thumbs').delegate('img','click', function(){ 
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
}); 

내 질문입니다 : 이미지 전환을 직선 스위치가 아닌 서로간에 사라지게하는 가장 쉬운 방법은 무엇입니까?

도움을 주셔서 미리 감사드립니다.

Answer 1

당신은 콜백에서 다음 fadeIn을 이미지를 fadeOut 수 src를 교환 한 후 :

$('#thumbs').delegate('img','click', function(){ 
    var src = this.src.replace('thumb', 'large'); 
    $("#largeImage").fadeOut(function() { 
     this.src = src; 
     $(this).fadeIn(); 
    }); 
}); 

Live example 우리의 gravatars를 사용하여 | source

(src에 대한 attr을 통과 할 필요가 없다는 것을 유의하십시오.이 DOM 요소에 reflected있어)

Answer 2

가장 쉬운 방법은 존재하는 jQuery 싸이클 플러그인 중 하나를 사용하는 것입니다. 하나는 @malsup.com입니다.

코드를 직접 코딩하려면 이미지 요소 2 개를 사용하고 이미지 요소 1 개를 다른 요소 뒤에 배치하고 맨 위에 하나씩 페이드 아웃해야합니다.

<img />의 부모에 position: relative을 사용하고 <img />에 position: absolute; top: 0; left: 0;을 사용하면됩니다. 당신이 fadeOut()에서 상단 이미지를 퇴색 한 후에는 콜백에서 제거 할 수 있습니다

$('img_on_top').fadeOut('slow', function() { 
    $(this).remove(); 
}); 

Answer 3

$('#thumbs').delegate('img','click', function(){ 
    var src = $(this).attr('src').replace('thumb','large'); 
    $('#largeImage').fadeOut(100,function() { 
     $(this).attr('src',src).fadeIn(); 
    }); 
});