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/