JQuery fadeToggle jumps up and down

Question

I Made a switch to toggle between 2 contact forms. Everytime when using the button, the second form jumps. Take a look here:

https://i.stack.imgur.com/0qXud.jpg

Here is my js:

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

And here my 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>

I tried a couple of things. Setting the display of the parent div to absolute and some other css stuff i found on the webs but cant remember. But nothing helped.

I would really appreciate some help.

Thanks in advance!!

I created demo code that was suppose to fix the issue, it was using fadeOut and fadeIn but it still was jumping so this is issue with your CSS, the solution is to use position: absolute and relative to position both forms in same place. that way when you fade one out second will appear beneath the first one that was fading. Using fadeOut and fadeIn didn't change anything. — jcubic, Apr 18 '19 at 21:02

Mauricio Cárdenas · Accepted Answer · 2019-04-18T21:00:21.323

1

You should separate both forms and set a callback on your fadetoggle function (there's a completion event, use that to your favor). Try something like:

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

Also, check out the api: http://api.jquery.com/fadetoggle/

edited Apr 18 '19 at 21:00

answered Apr 18 '19 at 20:52

Mauricio Cárdenas

474
5
22

This type of logic, I think, would work. Just keep in mind that whichever element is shown should fade out first, before the next fades in, so it may require checking whether the checkbox is checked, and changing the order that the elements are toggled accordingly. – Apr 18 '19 at 20:54
Check the edit, I fixed that. You just need to check if the div is visible or not, there's a good explanation on how that works here(most likely my syntax is wrong in that if, but you can check it in the link I added): https://stackoverflow.com/questions/15924751/check-if-a-element-is-displaynone-or-block-on-click-jquery – Mauricio Cárdenas Apr 18 '19 at 21:01
If that solved your issue, I'd appreciate if you mark it as the correct answer so it can help others too :) – Mauricio Cárdenas Apr 18 '19 at 21:06
1

Unfortunately, I'm not the OP, just chiming in. I did mark as useful, though, so a few rep for ya. Hopefully it helps OP out, and you get the accepted answer too! Here's your answer in a Fiddle, too, in case it helps OP: https://jsfiddle.net/uvg9xswo/1/ – Apr 18 '19 at 21:10
I didn't check the username! My bad haha, thanks for the jsfiddle, I hope it helps someone else too! – Mauricio Cárdenas Apr 18 '19 at 21:15
This is so awesome! Thank you so much! Marked it as the answer :) – DerQualle Apr 18 '19 at 22:29

score 0 · Answer 2 · answered Apr 18 '19 at 21:10

I would go with @Mauricio Cárdenas' answer, but if you absolutly must have them fade at the same time, you can do this:

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

This sets both forms to absolute and places them at the same position. Adding the parent div set to relative assures the forms position won't be set by the body.

Almost nice, just, the parent will lose height (since the absolute children :) ) — Roko C. Buljan, Apr 18 '19 at 21:29

JQuery fadeToggle jumps up and down

2 Answers2