JQuery - 슬라이딩 업 대신 페이드 ​​아웃하는 방법?

Question

나는 .about-us와 .price-list라는 두 개의 섹션을 가지고있다. 그것들을 활성화시키는 2 개의 버튼 .prices와 .about-us-btn. 두 섹션은 기본적으로 JQuery와 함께 숨겨져 있으며 각각에 대해 .slideToggle 이벤트가 있습니다. 하나라도 표시되면 다른 버튼을 클릭하면 슬라이드됩니다.

이제 슬라이딩 백업 대신 fadeOut 이벤트를 수행 할 수 있습니다. 작동하지만, .price-list가 먼저 보이면 .prices를 클릭하십시오. (두 섹션은 같은 위치에 있지만 버튼을 클릭하면 하나만 보입니다). .about-us가 먼저 표시되면 .prices 버튼을 클릭하면 .about-us가 페이드 아웃 대신 슬라이드 업됩니다.

어쨌든. 희망을 이해하고 나를 도울 수 있습니다!. Heres 내 JQuery 코드 :

$(document).ready(function(e){ 
    // Price-list & About-us are hidden by Javascript 
    $("aside.price-list, aside.about-us").hide(); 
    // Create a slide for the price-list 
    $("button.prices").click(function(){ 
     $("aside.about-us").fadeOut(300); 
     $("aside.price-list").slideToggle(300); 
    }); 
    // Create a slide for the about-us 
    $("button.about-btn").click(function(e){ 
     $("aside.about-us").slideToggle(300); 
     $("aside.price-list").fadeOut(300); 
    }); 

}); 

Answer 1

대신 .slideToggle() 당신은 사용해야 .slideUp() 여기에 명시 적으로 .slideDown() (당신은 그들이 같이, 처음에있어 어떤 상태 알 수 없기 때문에 : 당신이 원하는 경우,

$(function() { 
    $("aside.price-list, aside.about-us").hide(); 
    $("button.prices").click(function() { 
    $("aside.about-us").fadeOut(300); 
    $("aside.price-list").slideDown(300); 
    }); 
    $("button.about-btn").click(function() { 
    $("aside.about-us").slideDown(300); 
    $("aside.price-list").fadeOut(300); 
    }); 
}); 

또는 슬라이드가 다른 슬라이드에서 발생하기 전에 완전히 사라 지도록하려면

$(function() { 
    $("aside.price-list, aside.about-us").hide(); 
    $("button.prices").click(function() { 
    $("aside.about-us").fadeOut(300, function() { 
     $("aside.price-list").slideDown(300); 
    }); 
    }); 
    $("button.about-btn").click(function() { 
    $("aside.price-list").fadeOut(300, function() { 
     $("aside.about-us").slideDown(300); 
    }); 
    }); 
}); 

다음과 같이 .fadeOut() 콜백을 사용하세요.

Answer 2

jQuery Accordian 효과를 만들려고하는 것 같습니다. 다음 링크를 클릭하면 도움이됩니다.

http://docs.jquery.com/UI/Accordion