3

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

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

  1. 使用 jQuery 为翻转精灵添加淡入/淡出：http: //css-tricks.com/fade-image-within-sprite/ （方式三：旧版支持版本）

  2. 使用 jQuery 动画悬停

我已经使用了这两个示例并设法使它们一起工作：

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

真的很感谢任何建议...

4

1 回答 1

0

正如@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代码的原理。

于 2012-05-20T14:49:41.197 回答