Jquery淡入淡出并交换一个元素，这也将涉及到一个手风琴菜单

Question

当你点击姿势1时，你会注意到说明下降，图像出现在右侧。现在，当您单击姿势2或姿势3时，图像和说明会根据情况发生更改。

view website

我现在需要做的是 -

如果姿势1被点击，然后姿势2被点击1个的姿势菜单需要关闭，以便有只有一个姿势的描述可见的一次。

如果我还可以做到这一点，如果当前打开的姿势项目被点击以使其关闭并且没有开放的姿势描述，那么右侧也没有显示图像。

最后是否有一种方法可以确保只有一组动画图像正在运行，因为只要说用户完成了所有26个选项，并且它们继续在后台运行就可能会变得缓慢（感谢Nick Craver为那）。

在这个阶段只有姿势1,2和3可用。好了终于有码 -

//Description drop-down boxes 

$（文件）。就绪（函数（）{

//Hide (Collapse) the toggle containers on load 
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click 
$("h5.trigger").toggle(function(){ 
    $(this).addClass("active"); 
    }, function() { 
    $(this).removeClass("active"); 
}); 

//Slide up and down on click 
$("h5.trigger").click(function(){ 
    $(this).next(".toggle_container").slideToggle("slow"); 
}); 

}）;

//进出感谢aSeptik $（文件）。就绪（函数右侧淡出图像（）{
$（ '＃section_Q_01，＃section_Q_02，＃section_Q_03'）隐藏（）;

$(function() { 
     $('h5.trigger a').click(function(e) { 
     e.preventDefault(); 
     var trigger_id = $(this).parent().attr('id'); //get id Q_## 
     $('.current').removeClass('current').hide(); //add a class for easy access & hide 
     $('#section_' + trigger_id).addClass('current').fadeIn(5000); //show clicked one 
    }); 
}); 

}）;

//Fading pics 

$（文件）。就绪（函数（）{“。图片。 $（）循环（{ FX： '淡入'， 速度：2500 }）; }）;

描述盒 -

<h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing Deep Breathing :</a></h5> 
         <div class="toggle_container" > 
          <div class="block"> 
          <span class="sc">Pranayama Series</span> 
          <p class="bold">Benefits:</p> 

          </div> 
         </div> 

         <h5 class="trigger" id="Q_02" ><a href="#">Posture 2 : Half Moon Pose With Hands To Feet Pose :</a></h5> 
         <div class="toggle_container"> 
          <div class="block"> 
          <span class="sc">Ardha Chandrasana with Pada-Hastasana</span> 
          <p class="bold">Benefits:</p> 

          </div> 
         </div> 

         <h5 class="trigger" id="Q_03" ><a href="#">Posture 3 : Awkward Pose :</a></h5> 
         <div class="toggle_container"> 
          <div class="block"> 
          <span class="sc">Utkatasana</span> 
          <p class="bold">Benefits:</p> 

          </div> 
         </div> 

和右边的图像 -

<div id="section_Q_01" class="01"> 
         <div class="pics"> 
          <img src="../images/multi/poses/pose1/Pranayama._01.jpg"/> 
          <img src="../images/multi/poses/pose1/Pranayama._02.jpg"/> 
          <img src="../images/multi/poses/pose1/Pranayama._03.jpg"/> 
         </div> 
        </div> 


        <div id="section_Q_02" class="02"> 
         <div class="pics"> 
          <img src="../images/multi/poses/pose2/Half_Moon_Pose_04.jpg" /> 
          <img src="../images/multi/poses/pose2/Backward_Bending_05.jpg" /> 
          <img src="../images/multi/poses/pose2/Hands_to_Feet_Pose_06.jpg" /> 
         </div> 
        </div> 

        <div id="section_Q_03" class="03"> 
         <div class="pics"> 
          <img src="../images/multi/poses/pose3/Awkward_01.jpg" /> 
          <img src="../images/multi/poses/pose3/Awkward_02.jpg" /> 
          <img src="../images/multi/poses/pose3/Awkward_03.jpg" /> 
         </div> 
        </div>     

这将是一个奖金，如果图像淡出点击另一个元素时...但不是一个大问题。

感谢在看看

Answer 1

DEMO：http://jsbin.com/aceze/28 SOURCEhttp://jsbin.com/aceze/28/edit

jQuery代码：

$(function() { 
$('h5.trigger a').click(function(e) { 
e.preventDefault(); 
//TOGGLE PART 
$('.block').slideUp(400); 
    if($(this).parent().next().is(':hidden')){ 
     $(this).parent().next().slideDown(400); 
    } 
//DISPLAY HIDE BASED ON CLICK 
var trigger_id = $(this).parent().attr('id'); 
$('.current').removeClass('current').hide(); 
$('#section_' + trigger_id).addClass('current').fadeIn(500); 
// IMAGE SLIDER 
$('#section_' + trigger_id +' .pics img:gt(0)').hide(); 
    setInterval(function(){ 
     $('#section_' + trigger_id +' .pics :first-child').fadeOut() 
     .next('img').fadeIn() 
     .end().appendTo('#section_' + trigger_id +' .pics');}, 
     3000); 
    }); 
});​ 

HTML拨动部分必须是这样的

<div class="toggle_container"> 
<h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing:</a></h5> 
    <div class="block" style="display: none"> 
     <span class="sc">Pranayama Series</span> 
     <p class="bold">Benefits:</p> 
    </div> 
</div>