jquery - 编写一个漂亮的 jQuery 数组

Question

我是编写数组的新手，我想知道，如果你看下面的代码(不是很复杂)，我怎样才能摆脱所有其他东西，只让(高度)和(宽度)成为应用于cell_1 - cell_21

我只想将所有重复的内容写在一行中，并使用高度和宽度作为 VARS

请帮忙! :)

$(".cell_1").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'76px',padding:'0'},400)});
$(".cell_2").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'84px',height:'77px',padding:'0'},400)});
$(".cell_3").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'84px',height:'80px',padding:'0'},400)});
$(".cell_4").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'85px',height:'80px',padding:'0'},400)});
$(".cell_5").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'88px',height:'80px',padding:'0'},400)});
$(".cell_6").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'89px',height:'86px',padding:'0'},400)});
$(".cell_7").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'98px',height:'92px',padding:'0'},400)});
$(".cell_8").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'84px',height:'78px',padding:'0'},400)});
$(".cell_9").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'85px',height:'78px',padding:'0'},400)});
$(".cell_10").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'76px',padding:'0'},400)});
$(".cell_11").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'85px',height:'80px',padding:'0'},400)});
$(".cell_12").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'84px',height:'85px',padding:'0'},400)});
$(".cell_13").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'94px',height:'90px',padding:'0'},400)});
$(".cell_14").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'97px',height:'93px',padding:'0'},400)});
$(".cell_15").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'76px',padding:'0'},400)});
$(".cell_16").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'76px',padding:'0'},400)});
$(".cell_17").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'80px',padding:'0'},400)});
$(".cell_18").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'84px',padding:'0'},400)});
$(".cell_19").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'86px',height:'86px',padding:'0'},400)});
$(".cell_20").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'90px',height:'90px',padding:'0'},400)});
$(".cell_21").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'96px',height:'93px',padding:'0'},400)});

Answer 1

首先为所有元素提供一个公共(public)类，将其命名为cell。然后，像这样:

$('.cell').hover(function() {
    var $img = $(this).css({
        'z-index': '10'
    }).find('img').addClass("hover").stop(),
        origSize = $img.data('orig-size'),
        size = origSize || {height: $img.height(), width: $img.width()};

    if (!origSize) $img.data('orig-size', size);

    $img.animate({
        marginTop: '-10px',
        marginLeft: '-10px',
        width: size.width*1.2,
        height: size.height*1.2
    }, 200);
}, function() {
    var $img = $(this).css({
        'z-index': '0'
    }).find('img').removeClass("hover").stop(),

        size = $img.data('orig-size');

    $img.animate({
        marginTop: '0',
        marginLeft: '0',
        width: size.width,
        height: size.height
    }, 400)
});

演示:http://jsfiddle.net/mattball/kN7xS/