jquery затухает элемент при нажатии на ссылку, а затем поменять элемент при нажатии на другую ссылку - PullRequest
Новая
       37

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

0 голосов
/ 01 мая 2010

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

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

Ответы [ 3 ]

1 голос
/ 01 мая 2010

Вы должны удалить существующее изображение, прежде чем показывать другое. Я не думаю, что вам нужно повторять код для всех 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
   })
});
1 голос
/ 01 мая 2010

ДЕМО: 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 }
1 голос
/ 01 мая 2010

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

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

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

и используйте это.

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

...