我有一个 100% 高度的网站,它有一个隐藏的页脚,需要向上滑动并在单击按钮时显示它,当再次单击该按钮时,它应该向下滑动并隐藏它。
问题是滑动动画只在页脚向上滑动时起作用,而当它应该向下滑动时,它会颠簸而没有动画。
看问题就对了here ,通过单击页脚中的“更多”按钮。 用于操作该按钮的 JS 代码如下:
$(document).ready(function(){
$(".footer_container").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").slideToggle(speed);
$('html, body').animate({
scrollTop: $(document).height()
}, speed);
});
});
提前致谢!
更新:我刚刚试过这段代码:
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").toggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
显然,页脚上有一个我不知道存在的动画。也许这就是这个问题的原因?
最佳答案
好吧,我试了一下:
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").toggle(speed);
if ($(".footer_container").data('can-see')) {
var displaced = $('.footer_container').height();
$('.twitter_footer').animate({
marginTop: "600px",
}, {
duration: speed,
complete: function () {
$('.twitter_footer').css('margin-top', "0");
}
});
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
同样的结果,另一种方式(使用绝对定位以保持上面的元素不受干扰):
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").fadeToggle(speed);
if ($(".footer_container").data('can-see')) {
slide_down('.twitter_footer', speed);
slide_down('.button_bg', speed);
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
function slide_down(c, speed){
var tp = $(c).offset().top;
$(c).css({
'position': 'absolute',
'top': tp + "px"
});
$(c).animate({
top: tp + 170 + "px",
}, {
duration: speed,
complete: function () {
$(c).css({
'position': "relative",
'top': '0'
});
}
});
}
关于javascript - slideToggle 动画 "show"但不是 "hide",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17467577/