Brad Vanderbush Brad Vanderbush -4 years ago 128
Javascript Question

Trying to animate pages simultaneously on click with marginTop

I haven't found anywhere everywhere I've searched so I thought it is time to make a post and see if any of you can help me find out where I am going wrong. I can make my pages transition in and out simultaneously in css, but it is messing with the rest of my jQuery animation.So.. decided to use jQuery animate up and down instead. So far I can animate down properly to marginTop 0, but can't animate the pages back up simultaneously when one is clicked on due to them stacking on the bottom.



$(document).ready(function() {

$('.item').on('click', function() {
var $attr = $(this).attr("href");
if ($attr) {
$($attr).animate({ // this animates page down correctly
marginTop: '0%'
}, 1000);
} else {
$($attr).animate({ // trying to animate page back up, won't work
marginTop: '-500%'
}, 1000);
}
});

});

.panel {
width: 60%;
min-height: 100%;
overflow-y: auto;
overflow-x: hidden;
margin-top: -500%; /* negative margin to hide the page */
position: absolute;
background: grey;
}

#navigation {
position: fixed;
z-index: 6;
height: 100%;
width: 20%;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
border-left: -1px solid lightgrey;
border-left-width: ;
list-style: none;
z-index: 3
}

.item {
padding: 20px 0 20px 10px;
background-color: #ffffff;
display: block;
border-bottom: 1px solid lightgrey;
color: grey;
text-decoration: none;
z-index: 3;
}
I can achieve what I am trying to do with transitions in CSS but it creates bugs with my other JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Design Page-->
<div id="design" class="panel">
<div class="content">
<div class="container">
<h1>Design</h1>
</div>
</div>
</div>
<!-- /Design -->

<!-- Creativity Page-->
<div id="creativity" class="panel">
<div class="content">
<div class="container">
<h1>Creativity</h1>
</div>
</div>
</div>
<!-- /Creativity -->

<div class="right-toggle">
<ul id="navigation">
<li><a class="item" id="link-design" href="#design">DESIGN</a></li>
<li><a class="item" id="link-creativity" href="#creativity">CREATIVITY</a></li>
</ul>
</div>





I have two navigation buttons to help explain, when one is clicked the negative margin of my page animates down to marginTop 0, the other page is suppose to animate back up.

Answer Source

$(document).ready(function() {

  $('.item').on('click', function() {
    var href = $(this).attr("href");
    var $toAnimate = $(href);
 
      $toAnimate.animate({
        marginTop: '0%'
      }, 1000);
    
      $toAnimate.siblings('.panel').animate({
        marginTop: '-500%'
      }, 1000);
  });

});
.panel {
  width: 60%;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: -500%; /* negative margin to hide the page */
  position: absolute;
  background: grey;
}

#navigation {
  position: fixed;
  z-index: 6;
  height: 100%;
  width: 20%;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-left: -1px solid lightgrey;
  border-left-width: ;
  list-style: none;
  z-index: 3
}

.item {
  padding: 20px 0 20px 10px;
  background-color: #ffffff;
  display: block;
  border-bottom: 1px solid lightgrey;
  color: grey;
  text-decoration: none;
  z-index: 3;
}
I can achieve what I am trying to do with transitions in CSS but it creates bugs with my other JavaScript 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Design Page-->
<div id="design" class="panel">
  <div class="content">
    <div class="container">
      <h1>Design</h1>
    </div>
  </div>
</div>
<!-- /Design -->

<!-- Creativity Page-->
<div id="creativity" class="panel">
  <div class="content">
    <div class="container">
      <h1>Creativity</h1>
    </div>
  </div>
</div>
<!-- /Creativity -->

<div class="right-toggle">
  <ul id="navigation">
    <li><a class="item" id="link-design" href="#design">DESIGN</a></li>
    <li><a class="item" id="link-creativity" href="#creativity">CREATIVITY</a></li>
  </ul>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download