Jquery Accordion/Scrollto하지만 페이드 인과 아웃이 필요합니까?

Question

저는 그래픽 디자이너입니다 만 jquery와 관련하여 가장 웹에 정통하지는 않습니다! 이것은 현재 나의 딜레마입니다. 나는 아코디언에서 열어서 순차적 인 목록으로 이미지를 표시하고 링크를 클릭하여 링크를 클릭하고 페이드 인/아웃하는 링크를 클릭하는 링크를 가지고 있습니다. 이것은 페이드를 제외하고는 이것을 찾았습니다. http://jsfiddle.net/Jaybles/6EWAF/

페이드 인 및 페이드 아웃을 보여주는 링크가 있습니다. 동일한 아코디언으로 후에이 두 스타일을 결합하고 싶습니다! http://nekudacom.com/martimi/flash.html#

링크는 어느 날 함께 모두이 두 가지를 구현하는 데 도움이 수 또는 scrollto 및 페이딩과 함께 아코디언을 넣어 사용에 대한 더 나은 방법이 좋지 않을까 경우 JSFiddle가 Dutchie432를 제공합니다!

여기 여기 내 HTML

<dt><a href="#"><h3><span class="redtext">/</span> yaya Photography</h3></a></dt> 

<dd style="display: none; opacity: 0;" class="closed"> 

<ul> 
    <li> <img src="images/yaya_spacing_white.png" alt="yaya_spacing_white" width="600" height="406" /></li> 
    <li><img src="images/yayaspacing_black.png" alt="yayaspacing_black" width="600" height="406" /></li> 
    <li><img src="images/yaya_logo.png" alt="yaya_logo" width="601" height="401" /></li> 
    <li><img src="images/yaya_typography.png" alt="yaya_typography" width="600" height="402" /></li> 
    <li><img src="images/yaya_business_colors.png" alt="yaya_business_colors" width="600" height="403" /></li> 
    <li><img src="images/yaya_buscab.png" alt="yaya_buscab" width="600" height="600" /></li> 
    <li><img src="images/yaya_papers.png" alt="yaya_papers" width="600" height="400" /></li> 
    <li><img src="images/yaya_usb.png" alt="yaya_usb" width="600" height="400" /></li> 
    <li><img src="images/yaya_website.png" alt="yaya_website" width="600" height="359" /></li> 
    <li><img src="images/yaya_website_home.png" alt="yaya_website_home" width="600" height="360" /></li> 
    <li><img src="images/yaya_website_contact.png" alt="yaya_website_contact" width="600" height="360" /></li> 
    <li><img src="images/yaya_website_gallery.png" alt="yaya_website_gallery" width="600" height="360" /></li> 
    <li><img src="images/yaya_shirts1.jpg" alt="yaya_shirts1" width="600" height="400" /></li> 
    </ul> 

</dd> 

당신이 아코디언을 열 때 발생하는 정의 할 JQuery와 스크립트

$(document).ready(function(){ 
    $("dd:not(dd.open)").hide(); 
    $("dt a").click(function(){ 
     if ($("dd:not:visible") .get()[0] !== $(this).parent().next().get()[0]) {   
      $("dd").fadeTo("fast", 0); 
      $("dd:visible").slideUp("slow"); 
      $(this).parent().next().slideDown("def"); 
      $(this).parent().next().fadeTo("def", 1); 
     } 
     return true; 
    }); 

Answer 1

를 사용 change: function(event, ui) { ...} 또는 changestart: function(event, ui) { ...} 이다. ui.newContent`는 새롭게 열리는 content 요소가있는 jQuery 객체입니다.
전체 내용보기 here (이벤트 탭)