JQuery fadeToggle上下跳跃

Question

我切换到2个联系表格之间切换。每次使用按钮时，第二个表单都会跳转。看看这里：

https://imgur.com/G4kGqjl

这是我的js：

$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
    $("#mail-form, #phone-form").fadeToggle();
});

在这里我的HTML：

    <div class="div_switch">
      <label>
        <h1 class="switch_text">Email</h1>
      </label>
      <label class="switch">
        <input name="checkbox" type="checkbox" value="checkbox">
        <span class="slider round"></span>
      </label>
      <label>
        <h1 class="switch_text">Rückruf</h1>
      </label>
    </div>
    <div id="mail-form" class="mail-form">
      <form class="" action="index.html" method="post">
        <div class="contact-selector">
        </div>
        <div class="form-row">
          <div class="input-group col-md">
            <div class="input-group-prepend">
              <div class="input-group-text"><i class="fas fa-signature"></i></div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
          </div>
          <div class="input-group col-md">
            <div class="input-group-prepend">
              <div class="input-group-text"><i class="fas fa-envelope"></i></div>
            </div>
            <input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col">
            <label for="exampleFormControlTextarea1"></label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Deine Nachricht..."></textarea>
          </div>
        </div>
        <div class="email-btn-holder">
          <button type="submit" class="reshape_btn email-submit">Senden</button>
        </div>
      </form>
    </div>


    <div id="phone-form" class="phone-form">
      <form class="" action="index.html" method="post">
        <div class="contact-selector">
        </div>
        <div class="form-row">
          <div class="input-group col-md">
            <div class="input-group-prepend">
              <div class="input-group-text"><i class="fas fa-signature"></i></div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
          </div>
          <div class="input-group col-md">
            <div class="input-group-prepend">
              <div class="input-group-text"><i class="fas fa-envelope"></i></div>
            </div>
            <input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
          </div>
        </div>
        <div class="email-btn-holder">
          <button type="submit" class="reshape_btn email-submit">Senden <span><i class="fas fa-arrow-right"></i></span></button>
        </div>
      </form>
    </div>

我尝试了几件事。将父div的显示设置为绝对和我在网上找到的其他一些css的东西，但不记得了。但没有任何帮助。

我真的很感激一些帮助。

提前致谢！！

Answer 1

你应该将两个表单分开并在你的fadetoggle函数上设置一个回调（有一个完成事件，使用它对你有利）。尝试类似的东西：

    $("#phone-form").hide();
    $("input[name=checkbox]").click(function(){
        if($("#mail-form").is(':visible')){
            $("#mail-form").fadeToggle(function(){
                $("#phone-form").fadeToggle();
            });
        } else {
            $("#phone-form").fadeToggle(function(){
                $("#mail-form").fadeToggle();
            });
        }
    });

另外，看看api：http://api.jquery.com/fadetoggle/

Answer 2

我会选择@MauricioCárdenas的答案，但如果你绝对必须让它们同时淡出，你可以这样做：

<style>
    #parentDiv{position:relative}
    #mail-form, #phone-form{position:absolute;top:0}
</style>

<div ID="parentDiv">
    <div id="mail-form" class="mail-form">
      //Your form code
    </div>

    <div id="phone-form" class="phone-form">
      //Your form code
    </div>
</div>

这会将两种形式设置为绝对，并将它们放在同一位置。将父div设置添加到相对确保表单位置不会由正文设置。