更干净的写法

Question

我正在学习 JS，正在努力提高我的技能。我想知道是否有一种编写此代码的方法不需要重复这么多元素。代码如下。

// 升起 3 个面板 //面板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'});
            $j('.t1').removeClass("active");
});

//面板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");
});

//面板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");
});

Answer 1

基本上，您想要重用代码，所以试试这个：

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");
});