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

他の画像を表示する前に、既存の画像を削除する必要があります。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

最初にすでに実行されているものを非表示にする必要があります。

私は次のことをするかもしれません：

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

そしてそれを使用します。

編集: Web サイトを見ると、目に見える画像のセットだけを循環させたい場合もありますが、それは、すべてが実行されているときにサイトが遅くなった場合にのみ必要な最適化です。

于 2010-04-30T20:37:36.667 に答える
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 に答える