DIV popping into existence instead of slideDown() method occurring

Question

I have an issue similar to the one found in this thread. The difference with mine however is that I have a width set in the CSS. With my code, there are two divs using slideDown() in sequence in order to create a smooth transition effect. The first div tail works exactly as expected, but on the second head, it simply pops into existence, no matter what time I add to it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('.tail').hide();
    $('.head').hide()
    $("#button265764").click(function() {
      $(".tail").slideUp().delay(0).slideDown(2000, "swing");
      $(".head").slideUp().delay(2000).slideDown(1000, "swing");
      $('#button265764').unbind('click');
    });
  });
</script>

<style>
  <!-- not used in this transition) -->
  .h_tail {
    position: relative;
    margin-top: 10px;
    height: 10px;
    width: 100px;
    background-color: #73aae7;
    margin-left: 5px;
    transform: translateX(75px);
  }
  
  .tail {
    position: relative;
    width: 10px;
    height: 50px;
    background-color: #73aae7;
    margin-left: 5px;
  }
  
  .head {
    position: relative;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #73aae7;
    margin-left: 0;
  }
</style>
<!--Stand-in, actual button is elsewhere-->
<div id="button265764">click me
</div>
<div class="tail">
</div>

<div class="head">
</div>

I thought it might be due to the width of the head being 0, but if I change that to something like 10px just to test, it still just pops into existence with no slideDown effect. The delay on the head action works fine, so it's not just a matter of that whole code-line not running.

EDIT: Some additional info that may help:

I think I can definitively rule out the issue being the slideDown methods being in sequence. I added a second tail div (which I called tail2), and that worked fine, too. The issue is definitely related to something about the head div.

That code for reference:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $('.tail').hide();
 $('.tail2').hide();
 $('.head').hide()
 $("#button265764").click(function(){
  $(".tail").slideUp().delay(0).slideDown(2000, "swing");
  $(".tail2").slideUp().delay(2000).slideDown(2000, "swing");
  $(".head").slideUp().delay(4000).slideDown(1000, "swing");
  $('#button265764').unbind("click");
    });   
});
</script>

<style>
  .h_tail {
   position: relative;
   margin-top: 10px;
   height: 10px;
   width: 100px;
   background-color: #73aae7;
   margin-left: 5px;
   transform: translateX(75px);
  }
  
  .tail {
   position: relative;
   width: 10px;
   height: 50px;
   background-color: #73aae7;
   margin-left: 5px;
  }
  .tail2 {
   position: relative;
   width: 10px;
   height: 50px;
   background-color: #73aae7;
   margin-left: 5px;
  }

  .head {
   position: relative;
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid #73aae7;
   margin-left: 0;
  } 
</style>
<div id="button265764">click me
</div>
<div class="tail">
</div>
<div class="tail2">
</div>

<div class="head">
</div>

Did you try slideDown- slow, linear and fast for smooth transition , as swing" - moves slower at the beginning/end, but faster in the middle — Naga Sai A, Mar 21 '18 at 15:51
I've tried all of those, as well as not setting any, it all ends up the same. — EtherealBug, Mar 21 '18 at 15:56

score 2 · Accepted Answer · answered Mar 21 '18 at 16:55

The reason this happens is because your arrow is rendered with CSS borders.

slideDown() and slideUp() only animate the height of the element, and therefore only what's contained inside of it.

The border exists outside of the element and is therefore not affected, it "pops" into existence because when jQuery starts animating it first displays the element, that will render the element but with 0 height.

To illustrate, you can have an element with 0 height and width but it will still render it's border:

<style>
.an_element {
    position: relative;
    height: 0px;
    width: 0px;
    border: 10px solid #73aae7;
}
</style>
<div class="an_element"></div>

The div above has no height but it still renders it's border because the border is what's called "outer html", it's not actually inside the div.

Don't worry though, this is very easy to fix, all you have to do is animate a container div instead:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#button265764").click(function() {
            $(".container").slideDown(2000, "swing");
            $('#button265764').unbind('click');
        });
    });
</script>

<style>
    .h_tail {
        position: relative;
        margin-top: 10px;
        height: 10px;
        width: 100px;
        background-color: #73aae7;
        margin-left: 5px;
        transform: translateX(75px);
    }
      
    .tail {
        position: relative;
        width: 10px;
        height: 50px;
        background-color: #73aae7;
        margin-left: 5px;
    }
      
    .head {
        position: relative;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #73aae7;
        margin-left: 0;
    }

    .container {
        display: none;
    }
</style>
    
<div id="button265764">click me</div>
<div class="container">
    <div class="tail"></div>
    <div class="head"></div>
</div>

Doing this also saves you the hassle of chain animating several elements.

Ahh I didn't realize the border doesn't actually exist inside of the div itself, it makes perfect sense why it wasn't working now. Thanks! — EtherealBug, Mar 21 '18 at 17:05

DIV popping into existence instead of slideDown() method occurring

1 Answers1