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

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

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

更清洁的方式写这个

1 个答案: