Jquery 在单击时淡入淡出并交换元素,这也与手风琴菜单相关

发布于 2024-08-31 07:09:18 字数 4650 浏览 14 评论 0原文

您会注意到,当您单击姿势 1 时,描述会下拉,图像会出现在右侧。现在,当您单击姿势 2 或姿势 3 时,图像和描述会按预期发生变化。

查看网站

我需要什么现在要做的是 -

如果单击姿势 1,然后单击姿势 2,则需要关闭姿势 1 菜单,以便一次只能看到一种姿势描述。

如果我还可以这样做,如果单击当前打开的姿势项目,使其关闭,并且没有打开的姿势描述,则右侧也不会显示图像。

最后有一种方法可以确保只有一组动画图像正在运行,因为只要说用户浏览了所有 26 个选项并且他们继续在后台运行,它可能会变得缓慢(感谢 Nick Craver 提出这一点)。

此阶段只有姿势 1、2 和 3 可用。好吧,最后一些代码 -

//Description drop-down boxes

$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click
$("h5.trigger").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});

//Slide up and down on click
$("h5.trigger").click(function(){
    $(this).next(".toggle_container").slideToggle("slow");
});

});

//得益于aSeptik,右侧图像淡入淡出 $(文档).ready(函数(){
$('#section_Q_01,#section_Q_02,#section_Q_03').hide();

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

});

//Fading pics

$(文档).ready(函数(){ $('.pics').cycle({ fx: '淡入淡出', 速度:2500 }); });

描述框 -

<h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing Deep Breathing :</a></h5>
                        <div class="toggle_container" >
                            <div class="block">
                            <span class="sc">Pranayama Series</span>
                            <p class="bold">Benefits:</p>

                            </div>
                        </div>

                        <h5  class="trigger" id="Q_02" ><a href="#">Posture 2 : Half Moon Pose With Hands To Feet Pose :</a></h5>
                        <div class="toggle_container">
                            <div class="block">
                            <span class="sc">Ardha Chandrasana with Pada-Hastasana</span>
                            <p class="bold">Benefits:</p>

                            </div>
                        </div>

                        <h5 class="trigger" id="Q_03" ><a href="#">Posture 3 : Awkward Pose :</a></h5>
                        <div class="toggle_container">
                            <div class="block">
                            <span class="sc">Utkatasana</span>
                            <p class="bold">Benefits:</p>

                            </div>
                        </div>

以及右侧的图像 -

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

                    <div id="section_Q_03" class="03">
                        <div class="pics"> 
                            <img src="../images/multi/poses/pose3/Awkward_01.jpg" /> 
                            <img src="../images/multi/poses/pose3/Awkward_02.jpg" /> 
                            <img src="../images/multi/poses/pose3/Awkward_03.jpg" /> 
                        </div> 
                    </div>                  

如果单击另一个元素时图像淡出,那将是一个奖励......但没什么大不了的。

感谢您的浏览

You will notice when you click posture 1 the description drops down and images appear on the right. Now when you click posture 2 or posture 3 the images and description change as they should.

view website

What I need to do now is -

If posture 1 has been clicked and then posture 2 is clicked the posture 1 menu needs to close so that there is only one posture description visible at one time.

If I could also make it so that if the current open posture item is clicked so that it closes and there are no open posture descriptions that there also no images displayed on the right.

Finally is there a way to make sure only one set of animation images is running, because just say the user goes through all 26 options and they continue to run in the background it may get sluggish (thanks to Nick Craver for bringing that up).

At this stage only posture 1, 2 and 3 are available. Ok finally some code -

//Description drop-down boxes

$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click
$("h5.trigger").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});

//Slide up and down on click
$("h5.trigger").click(function(){
    $(this).next(".toggle_container").slideToggle("slow");
});

});

//Images on the right fade in and out thanks to aSeptik
$(document).ready(function(){
$('#section_Q_01,#section_Q_02,#section_Q_03').hide();

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

});

//Fading pics

$(document).ready(function(){
$('.pics').cycle({
fx: 'fade',
speed: 2500
});
});

Description boxes -

<h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing Deep Breathing :</a></h5>
                        <div class="toggle_container" >
                            <div class="block">
                            <span class="sc">Pranayama Series</span>
                            <p class="bold">Benefits:</p>

                            </div>
                        </div>

                        <h5  class="trigger" id="Q_02" ><a href="#">Posture 2 : Half Moon Pose With Hands To Feet Pose :</a></h5>
                        <div class="toggle_container">
                            <div class="block">
                            <span class="sc">Ardha Chandrasana with Pada-Hastasana</span>
                            <p class="bold">Benefits:</p>

                            </div>
                        </div>

                        <h5 class="trigger" id="Q_03" ><a href="#">Posture 3 : Awkward Pose :</a></h5>
                        <div class="toggle_container">
                            <div class="block">
                            <span class="sc">Utkatasana</span>
                            <p class="bold">Benefits:</p>

                            </div>
                        </div>

and the images on the right -

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

                    <div id="section_Q_03" class="03">
                        <div class="pics"> 
                            <img src="../images/multi/poses/pose3/Awkward_01.jpg" /> 
                            <img src="../images/multi/poses/pose3/Awkward_02.jpg" /> 
                            <img src="../images/multi/poses/pose3/Awkward_03.jpg" /> 
                        </div> 
                    </div>                  

It would be a bonus if images faded out when another element is clicked... but not a big deal.

Thanks for having a look

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

不顾 2024-09-07 07:09:18

演示: http://jsbin.com/aceze/28
来源 http://jsbin.com/aceze/28/edit

JQUERY 代码:

$(function() {  
$('h5.trigger a').click( function(e) {
e.preventDefault();
//TOGGLE PART
 $('.block').slideUp(400); 
  if( $(this).parent().next().is(':hidden') ){
      $(this).parent().next().slideDown(400);
  }
//DISPLAY HIDE BASED ON CLICK
var trigger_id = $(this).parent().attr('id');
$('.current').removeClass('current').hide();
$('#section_' +  trigger_id).addClass('current').fadeIn(500);
// IMAGE SLIDER
$('#section_' +  trigger_id +' .pics img:gt(0)').hide();
    setInterval(function(){
      $('#section_' +  trigger_id +' .pics :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('#section_' +  trigger_id +' .pics');}, 
      3000);
  });
});​

HTML 切换部分必须如下所示

<div class="toggle_container">
 <h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing:</a></h5> 
   <div class="block" style="display: none">
       <span class="sc">Pranayama Series</span>
         <p class="bold">Benefits:</p>
     </div>
</div>

DEMO: http://jsbin.com/aceze/28
SOURCE http://jsbin.com/aceze/28/edit

JQUERY CODE:

$(function() {  
$('h5.trigger a').click( function(e) {
e.preventDefault();
//TOGGLE PART
 $('.block').slideUp(400); 
  if( $(this).parent().next().is(':hidden') ){
      $(this).parent().next().slideDown(400);
  }
//DISPLAY HIDE BASED ON CLICK
var trigger_id = $(this).parent().attr('id');
$('.current').removeClass('current').hide();
$('#section_' +  trigger_id).addClass('current').fadeIn(500);
// IMAGE SLIDER
$('#section_' +  trigger_id +' .pics img:gt(0)').hide();
    setInterval(function(){
      $('#section_' +  trigger_id +' .pics :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('#section_' +  trigger_id +' .pics');}, 
      3000);
  });
});​

HTML TOGGLE PART MUST LOOK LIKE THIS

<div class="toggle_container">
 <h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing:</a></h5> 
   <div class="block" style="display: none">
       <span class="sc">Pranayama Series</span>
         <p class="bold">Benefits:</p>
     </div>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文