writing a nice jQuery array

I am new to writing Arrays, and I was wondering, if you look at the code below (not really complicated), how can I get rid of all the other stuff and just have the (height) and (width) be applied to cell_1 - cell_21

I just want to write all the repeating stuff in one line, and use the height and width as VARS

please help! :)

$(".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().animat开发者_StackOverflow社区e({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)});

---

Start by giving all the elements a common class, call it cell. Then, something like this:

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

Demo: http://jsfiddle.net/mattball/kN7xS/

---

EDIT: You could do this:

 var params ={ //Put here all properties that depend specifically on each cell
       'class1': {animWidth: 83, animHeight: 76},
       'class2': {animWidth: 84, animHeight: 77},
       'class3': {animWidth: 84, animHeight: 80},
       ...
    };

        for(var i = 1; i<=21; i++){
           var class = "cell_"+i;
           var animWidth= params[class].animWidth;
           var animHeight= params[class].animHeight;       
           $("."+class).hover(... .animate(..., width: animWidth, height: animHeight, ...);
        }

Hope it's understandable. Cheers