slideToggle动画“显示”而不是“隐藏”

Question

我有一个网站，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); 

}); 

而且aparently有一个动画回事，我不知道存在的页脚。也许这是造成这个问题的原因？

Answer 1

好了，所以我这给一个镜头：

$('.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')) 

}); 

示范在http://jsfiddle.net/DPq5Z/

相同的结果，另一种方式（使用绝对位置为了ioning保持原状以上元素）：

$('.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' 
       }); 
      } 
     }); 
    } 

示范在http://jsfiddle.net/9R6L4/

Answer 2

它可以像jQuery中的默认动画一样工作。如果你想定制这个。您需要使用jQuery缓动插件。它需要缓动作用的参数，比如easeIn，easeOut，Bounce等等，它控制流量。默认情况下，它是线性的，这就是你所看到的。

缓解插件：https://github.com/gdsmith/jquery.easing

$('.show_hide').click(function(){ 

    var speed = "500"; 
    $(".footer_container").fadeToggle(speed); 

    $('html, body').animate({ 
     scrollTop: $(".footer_container").offset().top + $('window').height() 
    }, speed); 

}); 

的jsfiddle：http://jsfiddle.net/vvmYH/4/