0

こんにちは、Jquery atm を学んでいます。次のことを単純化するための最良の方法は何だろうと思っています。

$(document).ready(function() {
$('.hover').hide();

$( '.state' ).hover(function() {
    $('.divtop .state').stop().animate({opacity:0}, 300),
    $('.divtop .hover').show(),
    $('.divtop .hover').stop().animate({opacity:1}, 1000);
    },

    function() {
    $('.divtop .hover').stop().animate({opacity:0}, 600,'',function(){$(this).hide()});
    $('.divtop .state').stop().animate({opacity:1}, 500);

    });

$( '.divmiddle .state' ).hover(function() {
    $('.divmiddle .state').stop().animate({opacity:0}, 300),
    $('.divmiddle .hover').show(),
    $('.divmiddle .hover').stop().animate({opacity:1}, 1000);
    }, function() {

    $('.divmiddle .hover').stop().animate({opacity:0}, 600,'',function(){$(this).hide()});
    $('.divmiddle .state').stop().animate({opacity:1}, 500);

    });

$( '.divbottom .state' ).hover(function() {
    $('.divbottom .state').stop().animate({opacity:0}, 300),
    $('.divbottom .hover').show(),
    $('.divbottom .hover').stop().animate({opacity:1}, 1000);
    }, function() {

    $('.divbottom .hover').stop().animate({opacity:0}, 600,'',function(){$(this).hide()});
    $('.divbottom .state').stop().animate({opacity:1}, 500);

    });
});

html は次のようになります。

<section class="left">
            <div class="divtop">
                <img src="img/layout/blue.png" class="state" alt="blue" />
                <img src="img/layout/bluehover.png" class="hover" alt="bluehover" />
            </div><!-- close class divtop -->
            <div class="divmiddle">
                <img src="img/layout/red.png" class="state" alt="red" />
                <img src="img/layout/redhover.png" class="hover" alt="redhover" />
            </div><!-- close class divmiddle -->
            <div class="divbottom">
                <img src="img/layout/pink.png" class="state" alt="pink" />
                <img src="img/layout/pinkhover.png" class="hover" alt="pinkhover" />
            </div><!-- close class divbottom -->

        </section><!-- close left section -->

css の画像は絶対的に配置されているため、互いに重なっています。

4

4 に答える 4

1

コードの重複は JS や jQuery の問題ではなく、一般的なプログラミングの問題です。したがって、重複したコードを再利用可能な関数またはメソッドにリファクタリングしてみてください。同じように 3 回行うので、ホバー処理をバインドする関数を作成するのはどうでしょうか。

$('#selector')また、 jQuery で を過度に使用しないでください。結果を取得し、要素を変数としてより直接的に使用できるのに、なぜ同じ要素を複数回検索するのですか。

だから私はこのようなことをします: http://jsfiddle.net/v8srd/

$(document).ready(function() {

  // Hide all the elements that should be shown on hover
  $('.hover').hide();

  // One function to setup all hovers
  var setupHover = function(position) {

    // Find the parent element that contains the state and the hover,
    // then find the state/hover elements within the parent
    var parent = $('.div' + position),
        state = parent.find('.state'),
        hover = parent.find('.hover');

    // Apply the hover to the above elements
    state.hover(function() {
      state.stop().animate({opacity:0}, 300),
      hover.show().stop().animate({opacity:1}, 1000);
    }, function() {
      hover.stop().animate({opacity:0}, 600,'',function(){$(this).hide()});
      state.stop().animate({opacity:1}, 500);
    });
  };

  // Bind the hover handling to each position
  setupHover('top');
  setupHover('middle');
  setupHover('bottom');
});​
于 2012-09-12T00:34:34.053 に答える
0

コードの共通部分を関数に入れます。次に例を示します。

$(document).ready(function() {

  function hover(sel, sel2){
    $(sel).hover(function() {
      $(sel2 + ' .state').stop().animate({opacity:0}, 300),
      $(sel2 + ' .hover').show().stop().animate({opacity:1}, 1000);
    }, function() {
      $(sel2 + ' .hover').stop().animate({opacity:0}, 600,'',function(){$(this).hide()});
      $(sel2 + ' .state').stop().animate({opacity:1}, 500);
    });
  }

  $('.hover').hide();
  hover('.state', '.divtop');
  hover('.divmiddle .state', '.divmiddle');
  hover('.divbottom .state', '.divbottom');
});
于 2012-09-12T00:18:42.000 に答える
0

This is what I would do...

$(function() {
  $('.hover').hide();
  $('.state' ).hover(function() {
    $(this).stop().animate({opacity:0}, 300);
    $(this).siblings('.hover').stop().animate({opacity:1}, 1000);
  }, function() {
    $(this).siblings('.hover').stop().animate({opacity:0}, 600, function() { $(this).hide(); });
    $(this).stop().animate({opacity:1}, 500);
  });
});
于 2012-09-12T00:22:05.523 に答える
0

1 つの方法は次のようになります。

$(document).ready(function() {
   $('.hover').hide();

   $( 'section.left > div' ).hover(function() {
      $(this).children('.state').stop().animate({opacity:0}, 300),
      $(this).children('.hover').show(),
      $(this).children('.hover').stop().animate({opacity:1}, 1000);
   },
   function() {
      $(this).children('.hover').stop().animate({opacity:0}, 600,'',function(){$(this).hide()});
      $(this).children('.state').stop().animate({opacity:1}, 500);
   });
});

コードを簡素化する必要があります。

于 2012-09-12T00:17:28.370 に答える