Question

I have worked out how to fade an element in: Click here to view the page

请点击Posture 1: Standing Deep Breathing : 您将注意到其中的内容。如果你现在点击姿态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) ;
iii

$( h5.trigger#Q_02 ).click(function(){
    $( #section_Q_02 ).fadeIn(5000) ;
iii

iii

页: 1

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

I need to be able to swap a total of 26 elements #section_Q_01 - #section_Q_26 Any help appreciated

Answer 1

<DEMO:rel=“nofollow noreferer”>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
});
});

不必在开始使用时使用掩饰

#section_Q_01, #section_Q_02 { display:none }

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

你们需要掩盖已经走过头的人。

我可以采取以下行动:

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

并使用。

Edit: 看看网站,你可能也只想有一套可观的图像,但只有网站在一切运行时能够解冻,才有可能实现最佳化。

友情链接