时间戳

首页 > 解决方案 > jQuery fadeToggle 上下跳动

javascript - jQuery fadeToggle 上下跳动

问题描述

我进行了切换以在 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 内容，但不记得了。但没有任何帮助。

我真的很感激一些帮助。

提前致谢！！

标签： javascriptjquerytwitter-bootstrap

解决方案

您应该将两种表单分开并在您的 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/

推荐阅读