How to optimize Jquery Code

How to optimize Jquery Code

Hi! 

i try to build something like this on my new page:


But i´m new with jquery - so how could i shorten this script? 
Do i have to make a plug-in for one box? im really stuck at this point because i know theres a much better way to do this!


  1. $('#sidebar-1')

      .hover(function() {

        $("a#btn-kontakt-1").stop().animate({top:'0px'}, 300);

        $("#sidebar-outline-1").addClass("sidebar-outline-hover", 100);

      }, function() {

        $("a#btn-kontakt-1").stop().animate({top:'-80px'},'2000');

        $("#sidebar-outline-1").removeClass("sidebar-outline-hover", 100);

      });


    $('#sidebar-2')

      .hover(function() {

        $("a#btn-kontakt-2").stop().animate({top:'0px'}, 300);

        $("#sidebar-outline-2").addClass("sidebar-outline-hover", 100);

      }, function() {

        $("a#btn-kontakt-2").stop().animate({top:'-80px'},'2000');

        $("#sidebar-outline-2").removeClass("sidebar-outline-hover", 100);

      });


    $('#sidebar-3')

      .hover(function() {

        $("a#btn-kontakt-3").stop().animate({top:'0px'},300 );

        $("#sidebar-outline-3").addClass("sidebar-outline-hover", 100);

      }, functio


I think its simple to answer my question if you know how jquery really works, so thanks for helping me.