jquery - このjQueryをどのように短縮しますか？

Question

私はjQueryを初めて使用するので、優しくしてください。

オンラインで2つの記事を見つけました。

jQueryを使用してロールオーバースプライトにフェードイン/フェードアウトを追加する：http： //css-tricks.com/fade-image-within-sprite/ （Way The Third：Legacy Support version）
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});
});                                 
});

本当にどんな提案にも感謝します...

score 0 · Accepted Answer

@ Dave-Newtonがすでに正しく述べたように、繰り返しコードの一部を短縮するには、何度も繰り返される部分と一意の部分を特定する必要があります。

あなたの場合、（私が見る限り）2つの主要なコードブロックがあります。

$(".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コードの原理をご覧ください。

jquery - このjQueryをどのように短縮しますか？

1 に答える 1

Related

Reference