Fußzeile zu animieren, auf Blättern

Können Sie das folgende tun, die Verwendung von CSS transitions

jQuery

Wir möchten hinzufügen oder entfernen einer Klasse aus der Fußzeile je nach scroll-position

$(function(){
    $(window).scroll(function(){  
        if($(document).scrollTop() > 100)
        {    
              $('#footer').addClass("show");
        }
        else
        {
            $('#footer').removeClass("show");
        }
    });
})​

CSS

Dann, CSS zu verwenden, ein-oder ausblenden des footer auf der Grundlage der Gegenwart, die show Klasse. Können wir mithilfe von css-transitions animieren, um die änderung

#footer 
{
    background: black;
    width: 100%;
    height: 0px;
    position: fixed;
    z-index:300;
    bottom: 0;
    overflow:none;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}
#footer.show
{
    height: 48px;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}

Wie Sie oben sehen können verändern wir die Höhe der Fußzeile, wenn es zu zeigen. Die overflow:none; hält den Inhalt der Fußzeile angezeigt, wenn die Höhe 0 ist.

Mit dieser Methode können Sie auch fade-in die Fußzeile, indem Sie die Einstellung "Deckkraft" - Werte, oder animieren Sie eine änderung in der Farbe.

JS Fiddle:

http://jsfiddle.net/DigitalBiscuits/3zh6h/5/

Ich hatte einigen Spaß beim Experimentieren mit Ihrem Problem und ich habe nicht gesehen, dass jemand anderes probieren (Fiddle):

$(function() {
    $(window).scroll(function() {
        $("#footer").fadeTo("500", $(document).scrollTop() / 100);
    });
})​

Diese Lösung wird auch verblassen die Fußzeile wieder aus, wenn der Benutzer scrollt wieder nach oben.

Es gibt einen großen Nachteil dieser Lösung: weil es verwendet die fadeTo() Methode, Unterstützung im IE geht äußerst begrenzt zu sein (tatsächlich, wird es brechen in den meisten Versionen von IE - ich kann mich nicht erinnern, was die Unterstützung ist für 9 und 10). Sie können dies umgehen, indem mit Hilfe einer von einem Dutzend plugins/fixes, um Unterstützung in IE für die Animation der opacity - Eigenschaft, und ändern Sie diese Lösung entsprechend (mit animate() statt fadeTo()).

Lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben. Viel Glück! 🙂

JQuery & Animationen

Für so etwas, würde ich raten, mit einer Kombination Wirkung von slide-und fade. Es ist viel mehr natürlich aussehende und daher nicht jar den Benutzer, wenn die auftreten.

Den arbeiten fiddle: http://jsfiddle.net/3zh6h/32/

Den relevanten code-snippet nicht in die Geige, aber hier, um zu demonstrieren, wie dies mit den von coding best practices im Hinterkopf):

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);  
};

Best Practices

Im Hinblick auf best practices, finden Sie einen sehr schönen Beitrag über benutzerdefinierte Animationen und wie Sie zu schreiben in einer wiederverwendbaren Art und Weise hier.

Gibt es keine "jquery-footer-animation" best practices als solche, zumindest, die ich kenne, aber Sie können zeichnen Sie aus populären, gut gestaltete websites, zu wissen, was funktioniert und was nicht. Beispiele für diese wäre nicht gut, da es hängt von der Art und dem Kontext Ihrer website.

CSS

Ich würde nicht raten, CSS-übergänge, da die specs sind nicht abgeschlossen (offizielle Entwürfe, Diskussionen können sein gefunden hier).

Auch, Sie sind nicht cross-browser-kompatibel vor allem w.r.t. ältere Browser. Aber dann wieder, das ist nur meine Meinung.