Cleaner way to write this

I'm just learning JS and am trying to improve my skills. I'm wondering if there's a method of writing this code that doesn't require repeating so many elements. Code below.

// raising 3 panels //panel 1

$j(".col1").mouseenter(function(){

            $j(".t1").stop().animate({opacity: 1, marginTop:'-20px'},{queue:false, duration:300, easing: 'easeOutExpo'} );
            $j('.t1').addClass("active");
});


  $j(".col1").mouseleave(function(){

            $j(".t1").stop().animate({opacity: 1, marginTop:'0px', backgroundColor:'#343536'},{queue:false, duration:300, easing: 'easeOutExpo'开发者_JS百科});
            $j('.t1').removeClass("active");
});

//panel 2

$j(".col2").mouseenter(function(){

            $j(".t2").stop().animate({opacity: 1, marginTop:'-20px'},{queue:false, duration:300, easing: 'easeOutExpo'} );
            $j('.t2').addClass("active");
});


  $j(".col2").mouseleave(function(){

            $j(".t2").stop().animate({opacity: 1, marginTop:'0px', backgroundColor:'#343536'},{queue:false, duration:300, easing: 'easeOutExpo' });
            $j('.t2').removeClass("active");
});

//panel 3

$j(".col3").mouseenter(function(){

            $j(".t3").stop().animate({opacity: 1, marginTop:'-20px'},{queue:false, duration:300, easing: 'easeOutExpo'} );
            $j('.t3').addClass("active");
});


  $j(".col3").mouseleave(function(){

            $j(".t3").stop().animate({opacity: 1, marginTop:'0px', backgroundColor:'#343536'},{queue:false, duration:300, easing: 'easeOutExpo'} );
            $j('.t3').removeClass("active");
});

Basically, you want to have code reuse, so try this:

function animateActive(ele) {
   $j(ele).stop().animate({opacity: 1, marginTop:'-20px'},{queue:false, duration:300, easing: 'easeOutExpo'} );
   $j(ele).addClass("active");
}

$j(".col1").mouseenter(function(){
   animateActive(".t1");
});

$j(".col2").mouseenter(function(){
   animateActive(".t2");
});

$j(".col3").mouseenter(function(){
   animateActive(".t3");
});