简化Jquery

Question

嗨我刚刚学习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中的图像位于绝对位置，因此它们位于彼此之上。

Answer 1

代码重复不是JS或jQuery问题，只是一般编程的事情。因此，请尝试将重复的代码重构为可重用的函数或方法。我们如何为我们创建一个绑定悬停处理的函数，因为我们以相同的方式执行3次。

另外，不要在jQuery中过度使用$('#selector')。为什么你可以在结果中多次搜索相同的元素，并将元素更直接地用作变量。

所以我会这样做：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');
});​

Answer 2

一种方法如下：

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

应简化您的代码。

Answer 3

将代码的公共部分放在一个函数中，例如：

$(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');
});

Answer 4

这就是我要做的......

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