試圖用marginTop同時動畫頁面頂部

Question

我在任何地方都找不到我搜索過的地方，所以我認爲是時候發表一篇文章，看看你們中的任何一位能否幫助我找出我出錯的地方。我可以讓我的頁面在css中同時進出，但它與我的jQuery動畫的其餘部分混淆。所以決定使用jQuery來上下動畫。到目前爲止，我可以正確地向下動畫到marginTop 0，但由於它們疊放在底部，因此當點擊某個頁面時不能同時備份頁面。

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

我有兩個導航按鈕，以幫助解釋，當一個人被點擊我的頁面的切緣陰性動畫下降到marginTop 0，另一頁是假設動畫回升。

Answer 1

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