jquery代碼使得結構更加緊湊

嗨，大家都在想知道是否有其他方式可以用更緊湊的格式來編寫下面的查詢。在下面你可以看到我的代碼。jquery代碼使得結構更加緊湊

$('footer').mouseover(function(){ 
    $(this).stop().animate({height:90}, 750); 
     $('#up').stop().animate({opacity:0},450); 
     $('#link-container').stop().animate({opacity:1},750); 
     }); 
$('footer').mouseout(function(){ 
    $(this).stop().animate({height:22}, 750); 
     $('#up').stop().animate({opacity:1},450); 
     $('#link-container').stop().animate({opacity:0},750); 
     });

來源

2013-12-07 Javier Lopez

10行o f代碼。你認爲可以做到多少更緊湊？不要浪費時間在微觀優化上：去做更有用的工作。 – 2013-12-07 23:04:03

您可以使用Google的Closure編譯器使其更加簡潔：http://closure-compiler.appspot.com/home –

謝謝@AndersonGreen，這非常棒。 –

您可以重構代碼到需要的參數爲不同的值的函數：

function anim(e, h, op) { 
    $(e).stop().animate({height:h}, 750); 
    $('#up').stop().animate({opacity:op},450); 
    $('#link-container').stop().animate({opacity:1-op},750); 
}

隨後鏈上的兩個綁定：

$('footer').mouseover(function(){ 
    anim(this, 90, 0); 
}).mouseout(function(){ 
    anim(this, 22, 1); 
});

來源

2013-12-07 23:05:04 Guffa

好，你可以鏈中的功能綁定：

$('footer').mouseover(function(){ 
    $(this).stop().animate({height:90}, 750); 
     $('#up').stop().animate({opacity:0},450); 
     $('#link-container').stop().animate({opacity:1},750); 
}).mouseout(function(){ 
    $(this).stop().animate({height:22}, 750); 
     $('#up').stop().animate({opacity:1},450); 
     $('#link-container').stop().animate({opacity:0},750); 
});

來源

2013-12-07 23:03:25 Alex

謝謝你對我有用 –

jquery代碼使得結構更加緊湊

回答

相關問題