JavaScript to-top-button: Button fallend einblenden lassen

[xep22]

moin, kurze Frage, habe hier diese JS für ein "to-top-button" :

<script>
$(document).ready(function(){
$("#top").hide();
$(function toTop(){
	$(window).scroll(function (){
		if ($(this).scrollTop() > 300){
			$('#top').fadeIn();
		}else{
			$('#top').fadeOut();
		}
	});
	$('#top').click(function (){
		$('body,html').animate({
			scrollTop: 0
		}, 600);
		return false;
	});
});
});
</script>

der button wird eingeblendet und ausgeblendet .will jetzt aber noch, dass er beim einblenden so etwas von oben nach unten kommt und beim ausblenden so nen paar Pixel nach oben geht - wisst ihr ? aber wie mache ich das ?

 

[coolmodi]

Möglichkeit 1: http://api.jquery.com/animate/ zusätzlich zum oder statt fadeIn() und fadeOut(). Siehe das schon verwendete animate() in deinem Code.

Möglichkeit 2: https://api.jquery.com/addclass/ bzw. removeClass() und die Position mit einer css klasse unter verwendung von CSS3 transitions ändern.

Edit: Ich verwende letzteres, ersetzt dann auch fadeIn() und fadeOut() durch opacity in css, z.B. so:

#top {
    position: fixed;
    right: 40px;
    bottom: 150px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
    opacity: 0;
}
#top.show {
    opacity: 1;
    bottom: 40px;
}

Anpassen und in das bisherige styling einfügen. Die fades durch add- und removeClass("show") ersetzen, fertig.