JQuery исчезать элемент в при нажатии на ссылку, а затем поменять элемент, когда другой нажатии ссылки

Question

Я работал, как увядает элемент в: Click here to view the page

Если нажать на заголовок осанки 1: Постоянное глубокое дыхание: вы заметите, что элемент замирает, как следует. Если вы сейчас нажмете на позицию 2, вы увидите, что элемент исчезает в нижней позиции 1. Мне нужно иметь возможность поменять положение 1 с положением 2.

У меня есть в общей сложности 26 постов, у которых есть изображения, которые нужно угасать а затем заменяется другим изображением при нажатии другого заголовка.

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

});

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

Мне нужно, чтобы иметь возможность поменять местами в общей сложности 26 элементов # section_Q_01 - # section_Q_26 Любая помощь оценили

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

не нужно использовать JQuery для шкурой при запуске Используйте CSS вместо

#section_Q_01, #section_Q_02 { display:none } 

Answer 2

Вам нужно, чтобы скрыть один уже запущен первый.

я мог бы сделать следующее:

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

хотя в реальном коде я определил бы такой метод, как:

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

и использовать.

Редактирование: если вы посмотрите на веб-сайт, вы также можете иметь только видимый набор изображений, но это оптимизация, возможно, только если сайт становится вялым, когда все работает.

Answer 3

Вы должны удалить существующее изображение, прежде чем показывать другое. Я не думаю, что вам нужно повторить свой код для всех 26 изображений.

попробовать это:

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