toggleClass 显示隐藏 div - 添加动画和 window 滚动?
toggleClass to reveal hidden div - add animation and window scroll?
我创建了一个按钮来切换其下方某个 div 的可见性。有没有办法在隐藏和显示转换之间的 div 添加动画?另外,有没有办法让 window 向下滚动到现在显示的 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');
});
这里有一个代码,我可以使用它向下滚动到您定位的锚点:
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 进行过渡 属性。
这里有一个很好的例子来解决你的问题:-)
我创建了一个按钮来切换其下方某个 div 的可见性。有没有办法在隐藏和显示转换之间的 div 添加动画?另外,有没有办法让 window 向下滚动到现在显示的 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');
});
这里有一个代码,我可以使用它向下滚动到您定位的锚点: 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 进行过渡 属性。
这里有一个很好的例子来解决你的问题:-)