jquery исчезает элемент при нажатии на ссылку, а затем меняет элемент при нажатии на другую ссылку

Я придумал, как затухать элемент: Нажмите здесь, чтобы просмотреть страницу

Если вы щелкнете по заголовку Поза 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 Любая помощь приветствуется


jquery ajax fadein swap elements
person Nik    schedule 30.04.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

ДЕМО: 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 }
person Luca Filosofi    schedule 30.04.2010
comment
Спасибо, это сработало хорошо и сэкономило мне много кода. Я скрываю элементы с помощью jquery, поэтому, если пользователь отключил его, изображения все равно будут отображаться. То, как мне нужно, чтобы это работало, становится все более сложным, поэтому я начал новый поток stackoverflow.com/questions/2749212/ Еще раз спасибо для вас лаконичное решение Ник - person Nik; 01.05.2010

arrow_upward
1
arrow_downward

вы должны удалить существующее изображение, прежде чем показывать другое. Я не думаю, что вам нужно повторять свой код для всех 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
   })
});
person meo    schedule 30.04.2010
comment
Спасибо, что посмотрели. Поскольку я полный новичок, я не мог заставить этот код работать на меня. - person Nik; 01.05.2010

arrow_upward
1
arrow_downward

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

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

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

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

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

person Kathy Van Stone    schedule 30.04.2010
comment
Спасибо, Кэти, все сработало, как надо. Я использую приведенный ниже код, потому что мне не нужно писать много кода, чтобы он работал. Сказав, что ваш ответ научил меня большему количеству jquery, поскольку он относится к коду, который у меня был. И Ник, я думаю, что ваше право иметь 26 исчезающих изображений в фоновом режиме может быть проблемой, я начал новую тему stackoverflow.com/questions/2749212/ для решения этого и некоторых других вопросов. Спасибо еще раз! - person Nik; 01.05.2010