我會如何縮短這個jQuery？

Question

我對jQuery很新，所以請溫和。

我發現了兩個網上的文章：

1. 添加淡入/淡出翻車精靈使用jQuery： http://css-tricks.com/fade-image-within-sprite/ （路第三：傳統支持版本）

2. Animating a Hover with jQuery

我已經使用了這兩個例子，並設法使它們工作GETHER：在一個列表中

http://www.marccohen.co.uk/dev/menu_example.htm

的翻車褪色精靈也觸發另一個列表動畫懸停，且反之亦然。麻煩的是所產生的jQuery的我已經是「非常」長，如此新來這個，我還是不知道我怎樣才能縮短：

$(function() { 
$(".menuicon1") 
.find("span") 
.hide() 
.end() 
.hover(function() { 
    $(this).find("span").stop(true, true).fadeIn({duration:300}); 
    $('ul.hover_block li.slide1').find('img').animate({top:'192px'},{queue:false,duration:150}); 
}, function() { 
    $(this).find("span").stop(true, true).fadeOut({duration:300}); 
    $('ul.hover_block li.slide1').find('img').animate({top:'276px'},{queue:false,duration:150}); 
}); 
$(".menuicon2") 
.find("span") 
.hide() 
.end() 
.hover(function() { 
    $(this).find("span").stop(true, true).fadeIn({duration:300}); 
    $('ul.hover_block li.slide2').find('img').animate({top:'192px'},{queue:false,duration:150}); 
}, function() { 
    $(this).find("span").stop(true, true).fadeOut({duration:300}); 
    $('ul.hover_block li.slide2').find('img').animate({top:'276px'},{queue:false,duration:150}); 
}); 
$(".menuicon3") 
.find("span") 
.hide() 
.end() 
.hover(function() { 
    $(this).find("span").stop(true, true).fadeIn({duration:300}); 
    $('ul.hover_block li.slide3').find('img').animate({top:'192px'},{queue:false,duration:150}); 
}, function() { 
    $(this).find("span").stop(true, true).fadeOut({duration:300}); 
    $('ul.hover_block li.slide3').find('img').animate({top:'276px'},{queue:false,duration:150}); 
}); 
$(".menuicon4") 
.find("span") 
.hide() 
.end() 
.hover(function() { 
    $(this).find("span").stop(true, true).fadeIn({duration:300}); 
    $('ul.hover_block li.slide4').find('img').animate({top:'192px'},{queue:false,duration:150}); 
}, function() { 
    $(this).find("span").stop(true, true).fadeOut({duration:300}); 
    $('ul.hover_block li.slide4').find('img').animate({top:'276px'},{queue:false,duration:150}); 
}); 
$(".menuicon5") 
.find("span") 
.hide() 
.end() 
.hover(function() { 
    $(this).find("span").stop(true, true).fadeIn({duration:300}); 
    $('ul.hover_block li.slide5').find('img').animate({top:'192px'},{queue:false,duration:150}); 
}, function() { 
    $(this).find("span").stop(true, true).fadeOut({duration:300}); 
    $('ul.hover_block li.slide5').find('img').animate({top:'276px'},{queue:false,duration:150}); 
}); 
    $('ul.hover_block li.slide1').hover(function(){ 
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150}); 
    $('.menuicon1').find("span").stop(true, true).fadeIn({duration:300}); 
}, function(){ 
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150}); 
    $('.menuicon1').find("span").stop(true, true).fadeOut({duration:300}); 
}); 
    $('ul.hover_block li.slide2').hover(function(){ 
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150}); 
    $('.menuicon2').find("span").stop(true, true).fadeIn({duration:300}); 
}, function(){ 
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150}); 
    $('.menuicon2').find("span").stop(true, true).fadeOut({duration:300}); 
});   
    $('ul.hover_block li.slide3').hover(function(){ 
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150}); 
    $('.menuicon3').find("span").stop(true, true).fadeIn({duration:300}); 
}, function(){ 
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150}); 
    $('.menuicon3').find("span").stop(true, true).fadeOut({duration:300}); 
});    
    $('ul.hover_block li.slide4').hover(function(){ 
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150}); 
    $('.menuicon4').find("span").stop(true, true).fadeIn({duration:300}); 
}, function(){ 
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150}); 
    $('.menuicon4').find("span").stop(true, true).fadeOut({duration:300}); 
});    
    $('ul.hover_block li.slide5').hover(function(){ 
    $(this).find('img').animate({top:'192px'},{queue:false,duration:150}); 
    $('.menuicon5').find("span").stop(true, true).fadeIn({duration:300}); 
}, function(){ 
    $(this).find('img').animate({top:'276px'},{queue:false,duration:150}); 
    $('.menuicon5').find("span").stop(true, true).fadeOut({duration:300}); 
});         
}); 

非常感謝所有建議...

Answer 1

由於@ Dave-Newton已經正確提到了，爲了縮短任何一段重複性代碼，你必須識別重複一遍又一遍的部分，那些是唯一。

在你的情況下，有一個（據我所見）兩個主要的代碼塊。

$(".menuicon1") 
    .find("span") 
    .hide() 
    .end() 
    .hover(function() { 
    $(this) 
     .find("span") 
     .stop(true, true) 
     .fadeIn({ duration: 300 }); 
    $('ul.hover_block li.slide1') 
     .find('img') 
     .animate({ top: '192px' },{ queue:false, duration: 150 }); 
    }, function() { 
    $(this) 
     .find("span") 
     .stop(true, true) 
     .fadeOut({ duration: 300 }); 
    $('ul.hover_block li.slide1') 
     .find('img') 
     .animate({ top: '276px' },{ queue: false, duration: 150 }); 
    }); 

顯然只有每個調用中css類的數字後綴不同。所以，你可能只需要創建一個函數，它接受一個數字輸入，並補充說，到動態部分：

function createBlockHover(blockNumber) { 
    $(".menuicon" + blockNumber) 
    .find("span") 
    .hide() 
    .end() 
    .hover(function() { 
     $(this) 
     .find("span") 
     .stop(true, true) 
     .fadeIn({ duration: 300 }); 
     $('ul.hover_block li.slide' + blockNumber) 
     .find('img') 
     .animate({ top: '192px' },{ queue:false, duration: 150 }); 
    }, function() { 
     $(this) 
     .find("span") 
     .stop(true, true) 
     .fadeOut({ duration: 300 }); 
     $('ul.hover_block li.slide' + blockNumber) 
     .find('img') 
     .animate({ top: '276px' },{ queue: false, duration: 150 }); 
    }); 
} 

之後，你作爲一個做動畫和衰落仍可能會降低過程懸停調用中， 。頂部和褪色方向（輸入/輸出）不同的位置：

function fadeBlocks(blockNumber, fadeIn, top) { 
    // fade the first block 
    $('.menuicon' + blockNumber) 
    .find("span") 
    .stop(true, true) 
    [fadeIn ? 'fadeIn' : 'fadeOut']({ 
     duration: 300 
    }); 

    // move the second 
    $('ul.hover_block li.slide' + blockNumber) 
    .find('img') 
    .animate({ top: top + 'px' }, { queue: false, duration: 150 }) 
} 

function createBlockHover(blockNumber) { 
    $(".menuicon" + blockNumber) 
    .find("span") 
    .hide() 
    .end() 
    .hover(function() { 
     fadeBlocks(blockNumber, true, 192); 
    }, function() { 
     fadeBlocks(blockNumber, false, 276); 
    }); 
} 

我希望展示的過程中一點點，所以你知道如何與你的代碼的後期處理。

欲瞭解更多信息，請看看DRY代碼的原理。