toggleClass顯示隱藏的div - 添加動畫和窗口滾動？

Question

我已經創建了一個按鈕來切換在它下面找到的某個div的可見性。有沒有辦法在隱藏和顯示轉換之間爲div添加動畫？另外，有沒有辦法讓窗口向下滾動到現在顯示的div的頂部;但只限於展示時，而不是隱藏時。

例

http://codepen.io/john84/pen/MKrGWV

HTML代碼

<a href="#section-contact-print" class="btn btn-primary btn-lg formtoggle">Log In</a> 

<section id="section-contact-print" class="hidden"> 
    <form role="form"> 

     <div class="form-group"> 
      <label for="email">Email address:</label> 
      <input type="email" class="form-control" id="email"> 
     </div> 

     <div class="form-group"> 
      <label for="pwd">Password:</label> 
      <input type="password" class="form-control" id="pwd"> 
     </div> 

     <div class="checkbox"> 
      <label><input type="checkbox"> Remember me</label> 
     </div> 

     <button type="submit" class="btn btn-default">Submit</button> 

    </form> 
</section> 

JS（上jQuery庫的頂部）

$('.formtoggle').click(function (event) { 
    event.preventDefault(); 

    var target = $(this).attr('href'); 
    $(target).toggleClass('hidden show'); 
}); 

Answer 1

在這裏你有我用向下滾動到你的目標錨代碼： http://codepen.io/anon/pen/MKrGXZ

$('.formtoggle').click(function (event) { 
    event.preventDefault(); 
    var $self = $(this); 
    var hash = $self.attr('href'); 
    $(hash).toggleClass('hidden show'); 

    // Scroll then add hash to url 
    $('html, body').stop().animate({ 
    scrollTop: $(hash).offset().top 
    }, 300, function() { 
    window.location.hash = hash; 
    }); 
}); 

關於動畫我只想用CSS爲與過渡性質，我認爲。

Answer 2

這裏是你的問題的一個很好的例子:-)

http://www.codesheet.org/codesheet/rNFhj0d7