2016-01-21 175 views
0

我已经创建了一个按钮来切换在它下面找到的某个div的可见性。有没有办法在隐藏和显示转换之间为div添加动画?另外,有没有办法让窗口向下滚动到现在显示的div的顶部;但只限于展示时,而不是隐藏时。toggleClass显示隐藏的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'); 
}); 
+0

你试过动画什么码/滚动? – toomanyredirects

回答

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为与过渡性质,我认为。

+0

谢谢,Mushr00m,为窗口滚动工作得很漂亮。我试图添加过渡属性,但仍然没有去动画的一面...... http://codepen.io/john84/pen/MKrGWV – John

+1

@John:这里当使用JQuery的动画http://codepen.io/anon/pen/XXVyKa我使用了SlideToggle()而不是切换类“隐藏”。 – Mushr00m

+0

辉煌。最后一件事;你只有在打开div时才有窗口滚动,而不是当用户关闭div时?我相信你在改变滑动之前已经有了。 – John