jquery disparaître un élément lorsqu'un lien est cliqué, puis échanger l'élément quand un autre lien est cliqué

Question

Je travaille comment se fanent un élément: Click here to view the page

Si vous cliquez sur la rubrique Posture 1: Respiration profonde: vous remarquerez que l'élément s'estompe comme il se doit. Si vous cliquez maintenant sur la posture 2, vous verrez l'élément disparaître en dessous de la posture 1. Je dois être capable d'échanger la posture 1 avec la posture 2.

J'ai un total de 26 postures qui ont toutes des images qui doivent disparaître dans et ensuite être permuté avec une autre image quand un autre titre est cliqué.

$(document).ready(function(){ 
$('#section_Q_01,#section_Q_02').hide(); 

$('h5.trigger#Q_01').click(function(){ 
    $('#section_Q_01').fadeIn(2000) ; 
}); 

$('h5.trigger#Q_02').click(function(){ 
    $('#section_Q_02').fadeIn(5000) ; 
}); 

});

et le code html

    <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>     

Je dois être en mesure d'échanger un total de 26 éléments # section_Q_01 - # section_Q_26 Toute aide appréciée

Answer 1

DEMO:http://jsbin.com/aceze/24

$(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 
}); 
});​ 

pas besoin d'utiliser jquery pour cacher à utiliser le départ css à la place

#section_Q_01, #section_Q_02 { display:none } 

Answer 2

Vous devez cacher celui qui est déjà en cours d'exécution en premier.

je pourrais faire ce qui suit:

$(document).ready(function(){ 
    $('#section_Q_01,#section_Q_02').hide(); 

    $('h5.trigger#Q_01').click(function(){ 
    $('.running').hide().removeClass('running'); 
    $('#section_Q_01').fadeIn(2000).addClass('running') ; 
    }); 

    $('h5.trigger#Q_02').click(function(){ 
    $('.running').hide().removeClass('running'); 
    $('#section_Q_02').fadeIn(5000).addClass('running') ; 
    }); 
}); 

bien dans votre code Je définirais une méthode telle que:

function showSection(id, speed) 
{ 
    $('.running').hide().removeClass('running'); 
    $(id).fadeIn(speed).addClass('running'); 
} 

et utiliser. Editer: En regardant le site web, vous pouvez aussi avoir uniquement le jeu d'images visibles en boucle, mais c'est une optimisation qui n'est peut-être nécessaire que si le site devient léthargique quand tout tourne.

Answer 3

vous devez supprimer l'image existante avant de montrer l'autre. Je ne pense pas que vous deviez répéter votre code pour les 26 images.

essayez ceci:

$("#content_main_left_hold_post > h5.trigger").each(function(){ 
    var tempid = $(this).attr("id") 
    tempid.bind("click", function(){ 
    $(".pics > img").hide() 
    $("#section_" + tempid).stop(false, true).fadeIn(2000) // selection of the image according to the id of h5, finishing the lest animation and finaly fades in your element 
    }) 
});