Question

我已经研究了如何淡化元素： Click here to view the page

如果您点击标题姿势1：站立深呼吸：，您会注意到该元素应该淡入。如果您现在单击姿势2，您将看到元素在下方姿势1中消失。我需要能够以姿势2交换姿势1。

我总共有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

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

我可能会做以下事情：

$(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 2

您必须在显示另一个之前删除现有图像。我不认为你必须为所有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
   })
});

Answer 3

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

不需要在开始使用css时使用jquery隐藏

#section_Q_01, #section_Q_02 { display:none }

jquery在单击链接时淡化元素，然后在单击另一个链接时交换元素

3 个答案: