CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Tyler Cardenas
Tyler Cardenas

Reputation: 205

.slideToggle() hides element when it reaches the top of the page, animation appears cut short

I'm creating a mobile navigation that slides down, and I'm using .slideToggle() to animate it

fiddle

html

<table id=menu>
 <tr>
  <td align="center">link</td>
  <td align="center">link</td>
 </tr>
 <tr>
  <td align="center">link</td>
  <td align="center">link</td>
 </tr>
 <tr>
  <td align="center">link</td>
  <td align="center">link</td>
</tr></table>

css

#menu {
  display: none;
  position: absolute;
  margin-top: 50px;
  width: 100%;
  height: 150px;
  background-color: #fff;
  z-index: 8;
}

tr {
  height: 50px;
}

js

$(".toggle").click(function() {
    $("#drop").toggleClass('flip');
    $("#menu").slideToggle(300);
});

but the table is taller than my header and when the it slides to the top of the page it just disappears instead of finishing the slide animation (see fiddle).

Any way to solve this? Or a better animation to use?

Thanks!

Upvotes: 3

Views: 79

Answers (2)

Jon Uleis
Jon Uleis

Reputation: 18659

What you're seeing is the margin-top animating - but jQuery cannot animate the height of a <table> element (more info in similar thread). Wrap the <table> in a <div> element and animate that, like so:

$(document).ready(function() {
  $(".toggle").click(function() {
    $("#drop").toggleClass('flip');
    $("#menu").slideToggle(300);
  });
});
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
header {
  background-color: #fff;
  height: 50px;
  width: 100%;
  position: absolute;
  box-shadow: 0px 1px 3px #d3d3d3;
  z-index: 9;
}
#drop {
  height: 15px;
  position: absolute;
  margin-left: 15px;
  margin-top: 18px;
  -moz-transition: transform .5s;
  -webkit-transition: transform .5s;
  transition: transform .5s;
}
.flip {
  transform: rotate(-180deg);
}
#menu {
  display: none;
  position: absolute;
  margin-top: 50px;
  width: 100%;
  height: 150px;
  background-color: #fff;
  z-index: 8;
}
#menu table {
  width: 100%;
}
tr {
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <img alt=menu class="toggle" id="drop" src=# />
</header>

<div id="menu">
  <table>
    <tr>
      <td align="center">link</td>
      <td align="center">link</td>
    </tr>
    <tr>
      <td align="center">link</td>
      <td align="center">link</td>
    </tr>
    <tr>
      <td align="center">link</td>
      <td align="center">link</td>
    </tr>
  </table>
</div>

Upvotes: 2

Jishnu V S
Jishnu V S

Reputation: 8407

i think this issue with your table, i have put a div before the table, now the issue is solved

$(function(){
	  $(".toggle").click(function() {
	    //$("#drop").toggleClass('flip');
	    $("#menu").slideToggle(400);
	  });

});
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

header {
  background-color: #fff;
  height: 50px;
  width: 100%;
  position: absolute;
  box-shadow: 0px 1px 3px #d3d3d3;
  z-index: 9;
}
#drop {
  height: 15px;
  position: absolute;
  margin-left: 15px;
  margin-top: 18px;
  -moz-transition: transform .5s;
  -webkit-transition: transform .5s;
  transition: transform .5s;
}

.flip {
  transform: rotate(-180deg);
}

#menu {
  display: none;
  position: absolute;
  margin-top: 50px;
  width: 100%;
  height: 150px;
  float:left;
  background-color: #fff;
  z-index: 8;
  top:0;
}
#menu table {
	width:100%;
}

tr {
  height: 50px;
}
<header>
  <img alt=menu class="toggle" id="drop" src=# />
</header>

<div id=menu>
<table>
  <tr>
    <td align="center">link</td>
    <td align="center">link</td>
  </tr>
  <tr>
    <td align="center">link</td>
    <td align="center">link</td>
  </tr>
  <tr>
    <td align="center">link</td>
    <td align="center">link</td>
  </tr>
</table>  
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Upvotes: 1

Related Questions