如何缩短这个jQuery？

我对jQuery很陌生，所以请温柔一点

我在网上找到了两篇文章：

使用jQuery向滚动精灵添加淡入/淡出： （第三种方式：传统支持版本）

我使用了这两个示例，并设法使它们协同工作：

一个列表中的滚动淡入淡出精灵也会触发另一个列表中的动画悬停，反之亦然。问题是，我得到的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});
});                                 
});

---

非常感谢您的建议。

正如@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 });
    });
}

在此之后，您仍然可以减少hover调用中的过程， 当那一个做动画和淡入淡出。顶部和淡入方向（向内/向外）在此处不同：

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

我希望这会显示一点过程，这样您就知道如何处理代码的后半部分

---

有关更多信息，请查看代码原理。

编写一个函数/扩展jQuery，传入数字（每个代码块之间唯一的变化），并为每个元素调用它（如果重构为函数）或在选择器列表上调用它（如果扩展jQuery）。您可能没有意识到，但是有一个codereview.stackexchange.com，用于一般检查大量代码。（你的问题没有问题，但是你可能也希望使用codereview。）除了缩小代码，不是真的没有。谢谢。RE：你的第一个建议：我当然知道你的意思，但我不太明白如何让函数createBlockHover（blockNumber）真正工作。