Anomalous padding/margin during slideToggle() jquery

Question

Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.

First screen is with static page and no transition, the latter during the transition: https://i.sstatic.net/dyGjP.jpg Here the code, I'm programming on Atom with live server plugin:

// Example starter JavaScript for disabling form submissions if there are invalid fields

var index_toggle = new Boolean(true);

$(document).ready(function() {
  $("#toggle_home").click(function() {
    $("#login").slideToggle("slow");
    $("#register").slideToggle("slow");
    $("#toggle_home_txt").fadeOut(function() {
      if (index_toggle) {
        $(this).html("↧ LOGIN").fadeIn();
      } else {
        $(this).html("↥ REGISTER").fadeIn();
      }
      index_toggle = !index_toggle;
    });


  });
});

#register {
  display: none;
}

body.index {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 40px;
  background-color: white;
  color: #6c757d;
}

div.index {
  padding-top: 40px;
  padding-bottom: 0px;
  border-radius: 3%;
  width: 500px;
}

button {
  border-radius: 20%;
  padding-bottom: 10%;
  padding-top: 0;
  background-color: #e9ecef;
  border-color: #6c757d;
  border-style: solid;
  color: #6c757d;
  transition: 0.3s ease;
}

button:focus {
  outline: none;
}

#send_butt {
  width: 40px;
  height: 40px;
}

button:hover {
  background-color: #6c757d;
  color: white;
}

button.toggle_home {
  top: 0px;
  padding-bottom: 2%;
  transform: translate(0, -100%);
}

img.index {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  background-color: #e9ecef;
  border-color: white;
  border-style: solid;
}

.form-signin {
  width: 450px;
  padding: 15px;
  margin: auto;
}





  
    
    Please fill this form to create an account.



    
      

      
        
        
          
            
               ›
            
            
          
        
      

      

      
        

        
          
          Remember me?
        
      
    

    
      
      
        
      
    

    

      
        
          
        
        
          
        
      
      
        
          
            
               ›

showdev · Accepted Answer

I believe the changing gap is a result of margin collapse.

Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.

On page load, margins are collapsed between p.index_text and the

inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the

and the

and the margin stops collapsing. Visually, the gap increases between the two elements.

There are various methods to prevent margin collapse. I chose padding since the other form already has some:

#login {
  padding:15px;
}

Working example:

// Example starter JavaScript for disabling form submissions if there are invalid fields

var index_toggle = new Boolean(true);

$(document).ready(function() {
  $("#toggle_home").click(function() {
    $("#login").slideToggle("slow");
    $("#register").slideToggle("slow");
    $("#toggle_home_txt").fadeOut(function() {
      if (index_toggle) {
        $(this).html("↧ LOGIN").fadeIn();
      } else {
        $(this).html("↥ REGISTER").fadeIn();
      }
      index_toggle = !index_toggle;
    });


  });
});

#register {
  display: none;
}

body.index {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 40px;
  background-color: white;
  color: #6c757d;
}

div.index {
  padding-top: 40px;
  padding-bottom: 0px;
  border-radius: 3%;
  width: 500px;
}

button {
  border-radius: 20%;
  background-color: #e9ecef;
  border-color: #6c757d;
  border-style: solid;
  color: #6c757d;
  transition: 0.3s ease;
}

button:focus {
  outline: none;
}

#send_butt {
  width: 40px;
  height: 40px;
}

button:hover {
  background-color: #6c757d;
  color: white;
}

img.index {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  background-color: #e9ecef;
  border-color: white;
  border-style: solid;
}

.form-signin {
  width: 450px;
  padding: 15px;
  margin: auto;
}

#login {
  padding:15px;
}

hr,
#register {
  margin: 0 !important;
}

#div_toggle {
  display: flex;
  align-items: center;
}
#div_toggle:after {
  content: "";
  flex: 1 0 auto;
  border-top: 1px solid #CCC;
}





  
    
    Please fill this form to create an account.



    
      

      
        
        
          
            
               ›
            
            
          
        
      

      

      
        

        
          
          Remember me?
        
      
    

    
      
    

    

      
        
          
        
        
          
        
      
      
        
          
            
               ›

The animations also seem to jump and the end, but that may be a separate issue.

Edit

Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.

Anomalous padding/margin during slideToggle() jquery

Answers (2)

Edit

Related Questions