toggleClass显示隐藏的div - 添加动画和窗口滚动?

时间:2016-01-21 13:31:34

标签: javascript jquery css toggleclass

我创建了一个按钮来切换在其下方找到的某个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');
});

2 个答案:

答案 0 :(得分: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来实现我认为的过渡属性。

答案 1 :(得分:1)

这是一个很好的例子: - )

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