썸네일 및 자동 페이드가있는 JQuery 내용 페이더

Question

썸네일 및 자동 페이드가있는 특수 컨텐츠 페이더를 찾고 있습니다. 웹 검색을 통해 많은 것을 찾았지만, 내가 원하는 것을 찾지 못했습니다. 대부분의 경우 콘텐츠를 슬라이드 할 수 있지만 페이드는 할 수 없으며 페이드가 가능하면 사진을 흐리게 표시 할 수 있습니다. 나는 easing-Plugin으로 시도하지만, 이것은 사라지지 않고 슬라이드 만 할 수있다. 그런 다음 "갤러리아"를 사용해보십시오. 여기 텍스트 나 텍스트가 희미해질 수 없으며 이미지 만 사라집니다.

그게 전부입니다 : 페이드하고 싶은 텍스트 (h, p, 버튼 등)가있는 div가 있습니다. 미리보기 이미지를 클릭하면 사라지기를 원하지만 내용은 자동으로 사라집니다.

답장을 보내 주시면

안드레아스

Answer 1

이것은 당신이 무엇을 작동 할 수있는 신속하고 더러운 방법 :

$('#teaser-thumbs li').click(function(){ 
    var teaserDiv = '#' + $(this).children('a img').children('img').attr('title'); 
    $(this).fadeOut('slow'); 
    $(teaserDiv).fadeOut('slow'); 
}); 

그것은 당신 된 DIV에 축소판과 관련된 몇 가지 방법이 필요를, 그래서 나는를 추가했다 같은 작은 이미지에 TITLE 속성은 다음과 같습니다

<div id="teaser-thumbs"> 
    <ul> 
     <li><a><img src="teaser1_thumb.jpg" alt="" title="teaser1" /></a></li> 
     <li><a><img src="teaser2_thumb.jpg" alt="" title="teaser2" /></a></li> 
     <li><a><img src="teaser3_thumb.jpg" alt="" title="teaser3" /></a></li> 
    </ul> 
</div> 

축소판과 된 DIV 항상 첫 번째경우 즉, 서로에 직접적인 관계에있을려고하는 경우 이것은 HTML입니다 이건 내 사업부

의 코드

$('#teaser-thumbs li').click(function(){ 
    var teaserDiv = $(this).index(); 
    $(this).fadeOut('slow'); 
    $('#mainteaser div:eq('+teaserDiv+')').fadeOut('slow'); 
}); 

Answer 2

:3210 항상 제목 속성을 포기하고 다음 코드를 사용할 수 있습니다, #mainteaser에서 첫 <div>에 '연결'될 것입니다 :

<div id="mainteaser"> 
    <div id="teaser1"> 
     <h2>Loremipsum 1</h2> 
     <p>Nam liber tempor cum soluta nobis eleifend option congue 
     nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cumsoluta nobis eleifend option congue nihil imperdiet doming id quod</p> 
     <div class="button"><a href="#">more ...</a></div> 
    </div> 
    <div id="teaser2"> 
    <h2>Loremipsum 2</h2> 
    <p>Nam liber tempor cum soluta nobis eleifend option congue 
    nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p> 
    <div class="button"><a href="#">more ...</a></div> 
    </div> 
    <div id="teaser3"> 
    <h2>Loremipsum 3</h2> 
    <p>Nam liber tempor cum soluta nobis eleifend option congue 
    nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p> 
     <div class="button"><a href="#">more ...</a></div> 
    </div> 
</div> 

<div id="teaser-thumbs"> 
    <ul> 
    <li><a href="#"><img src="teaser1_thumb.jpg" alt="" /></a></li> 
    <li><a href="#"><img src="teaser2_thumb.jpg" alt="" /></a></li> 
    <li><a href="#"><img src="teaser3_thumb.jpg" alt="" /></a></li> 
    </ul> 
</div> 

내가 사업부 "티저 - 엄지 손가락"의 썸네일에 클릭에 의해 퇴색 할 등 ID가 "teaser1"를 가진 div의. 그러나 또한 "티저"는 자동으로 퇴색해야합니다.