0

我已经弄清楚如何淡入元素： 单击此处查看页面

如果您单击标题姿势 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 任何帮助表示赞赏

4

3 回答 3

1

您需要先隐藏已经运行的那个。

我可能会做以下事情：

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

并使用它。

编辑：查看网站，您可能还希望只有可见的图像集循环，但只有当网站在一切运行时变得缓慢时才需要进行优化。

于 2010-04-30T20:37:36.667 回答
1

您必须在显示另一个之前删除现有图像。我认为您不必为所有 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
   })
});
于 2010-04-30T20:41:47.153 回答
1

演示：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 }
于 2010-04-30T21:46:44.703 回答