사용자가 두 개의 링크 '다음'및 '이전'을 클릭하여 이미지를 탐색하는 jQuery 라이트 박스가 있습니다.이미지 라이트 박스에 fadeIn 및 fadeOut 효과를 추가하십시오. JQuery
새 이미지를 어떻게 페이드 인으로합니까?
다음은 새 이미지가 이전 이미지를 대체하는 방법에 대한 내 코드 스 니펫입니다.
var image = $(item).find('a').attr('href');
$('#lightbox img#image').attr('src', image);
2 개 제안 솔루션 :
솔리톤 (불투명도) 1
페이드 아웃 변경 이미지를 다시 페이드.
$('#lightbox img#image').animate({ opacity: 0}, 500, function(){
$('#lightbox img#image').attr('src', image);
$('#lightbox img#image').animate({ opacity: 1}, 500);
});
솔리톤 2 bricker에서 언급 한 바와 같이
, 당신은 http://jonraasch.com/blog/a-simple-jquery-slideshow가하는 등의 방법을 사용할 수 있지만, 할 그래서 당신은 동시에 두 개의 이미지 객체를 가진 피할 수 있다고 생각합니다. 슬라이드 쇼를 채택하기 위해서는 이것이 더 효과적 일 것이라고 생각합니다. 그렇지만 동시에 퇴색하고 페이드 아웃 할 수 있습니다.
이것은 내가 사용하는 것으로, 정말 멋지게 작동하며 매우 간단합니다. http://jonraasch.com/blog/a-simple-jquery-slideshow. 당연히 당신은 간격 대신에 클릭으로 변경하기 위해 그것을 조정해야 할 것입니다. – bricker
네, 좋은 슬라이드 쇼예요.하지만 제 갤러리를 만들고 그냥 그 페이딩 효과가 필요합니다. 아마도 내가 생각하는 코드 중 가장 간단한 부분 일 것입니다. –
그가 슬라이드 쇼의 페이딩을 어떻게 처리하는지보십시오. 그것은 당신을 위해 작동합니다. 그는 별도의 div를 설정 한 다음 불투명도와 z- 색인을 조작합니다. – bricker