Jquery 链接 hide/show fadein/fadeout

Question

这是我第一次 post 在这里，如果我有什么错误，请原谅。我对 jquery.

也很陌生

所以，我一直在与这个 jquery 代码作斗争，我想做的是每个 div="step" 显示或隐藏，淡入或淡出按下按钮后。

我试过在按下按钮后链接 jquery，一个 div 隐藏，紧接着下一个 div 显示。我已经阅读了很多关于这个问题的文章，我认为我没有犯任何错误，但它不起作用。

关于它的问题有什么想法吗？

代码如下：

$(document).ready(function() {
  $('#btnsteps').click(function() {
    $('#step1').hide(1000, function() {
      $("#step2").show(1000, function() {
        $('#btnsteps2').click(function() {
          $('#step2').hide(1000, function() {
            $("#step3").show(1000);
          });
        });
      });
    });
  });
});

<div id="form">

  <div class="register">
    <!--step1-->
    <div id="step1">
      <p>ARE YOU READY ?</p>
      <button id="btnsteps" type="submit">YES &raquo;</button></div>
    <!--end step 1-->

    <!--step 2-->
    <div id="step2" class="hidden">
      <p>ARE YOU WANT TO JOIN FOR FREE ?</p>
      <button type="submit" id="btnsteps2">YES &raquo;</button></div>
    <!--end step 2-->
    <!--step 3-->
    <div id="step3" class="hidden">
      <p>THEN YOU MUST KNOW</p>
      <button id="btnjoin" type="submit">Join me &raquo;</button></div>
    <!--end step 3-->

  </div>
  <!-- fin register-->



</div>
<!-- fin form-->

Answer 1

写这样的东西：

$(document).ready(function(){
    $('#step1').show();
    $('.btnsteps').click(function() {
       $(this).closest('.stepdiv').next('.stepdiv').show();
       $(this).closest('.stepdiv').hide(); 
    });
});

<div id="form">

<div class="register"> 
          <!--step1-->
          <div id="step1" class="stepdiv">
           <p>ARE YOU READY ?</p>
           <button class="btnsteps" type="submit">YES &raquo;</button>
          </div>
          <!--end step 1--> 
           
          <!--step 2-->
          <div id="step2" class="hidden stepdiv">
           <p>ARE YOU WANT TO JOIN FOR FREE ?</p> 
           <button class="btnsteps" type="submit">YES &raquo;</button>       
          </div>
          <!--end step 2--> 
          <!--step 3-->
          <div id="step3"  class="hidden stepdiv">
           <p>THEN YOU MUST KNOW</p>
           <button class="btnsteps" type="submit">YES &raquo;</button>
           </div>
         
          <!--end step 3--> 
        </div>
<!-- fin register-->

        
       
    </div>
<!-- fin form-->

Answer 2

js代码：

$(document).ready(function(){
    $('#btnsteps').click(function() {
        $('#step1').hide(1000);
        $("#step2").show(1000);
    });
    $('#btnsteps2').click(function() {
        $('#step2').hide(1000);
        $("#step3").show(1000);
    )};
});

Answer 3

JS:

$(document).ready(function() {
  $("#step2").hide();
  $("#step3").hide();

  $("#btnsteps").click(function() {
    $("#step1").hide(1000, function() {
      $("#step2").show(1000, function() {});
    });

    $("#btnsteps2").click(function() {
      $("#step2").hide(1000, function() {
        $("#step3").show(1000);
      });
    });
  });
});

这是你想要的吗？

Jquery 链接 hide/show fadein/fadeout

Jquery chaining hide/show fadein/fadeout

jquery

function

chaining