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() {
   $('.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 回答
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

这就是我会做的...

$(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 回答