.load() multiple link addresses into one div

I have a really long block of code below, I am loading text into a div while hovering over another div, I want to load a bunch of different links into the same div, I have two problems

1) I know there is a better way to write this code, using an array - I need to learn how to write arrays.

2) I need the animations to stop if the mouse is moving fast, and not keep loading the #id's for a long time if you s开发者_JAVA百科cribble your mouse over all the links

does that make sense??

$(function() {
$(".cell_1 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #arkitek_reel');
    });
$(".cell_1 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_2 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #ab_sciex');
    });
$(".cell_2 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_3 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #stratos_');
    });
$(".cell_3 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_4 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #riken_');
    });
$(".cell_4 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_5 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #scitable_');
    });
$(".cell_5 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_6 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #ubc_asthma');
    });
$(".cell_6 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_7 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #xcelligence_');
    });
$(".cell_7 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_8 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #lbsc_geneware');
    });
$(".cell_8 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_9 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #nr_micro');
    });
$(".cell_9 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_10 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #genII_knee');
    });
$(".cell_10 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_11 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #exiqon_');
    });
$(".cell_11 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_12 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #hpi_');
    });
$(".cell_12 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_13 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #plexmark_');
    });
$(".cell_13 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_14 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #siscapa_');
    });
$(".cell_14 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_15 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #RNAi_');
    });
$(".cell_15 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_16 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #k2_');
    });
$(".cell_16 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_17 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #nucleonics_');
    });
$(".cell_17 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_18 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #ca125_');
    });
$(".cell_18 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_19 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #cci_nursing');
    });
$(".cell_19 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_20 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #cadherins_');
    });
$(".cell_20 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

$(function() {
$(".cell_21 a").live('mouseover', function(){
    $('#gridInfo').fadeIn(100).load('http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #ascent_');
    });
$(".cell_21 a").live('mouseout', function(){
    $('#gridInfo').fadeOut(100);
    });
});

---

To avoid code repetition, i'd do this:

var urls = [
 'http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #cadherins_',
 'http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #ascent_',
 ...
];

$(document).ready(function() {    
    for(var i=0; i< urls.length; i++){
        $(".cell_"+(i+1)+" a").hover(function(){
            $('#gridInfo').fadeIn(100).load(urls[i]);
        }, function(){
            $('#gridInfo').fadeOut(100);
        });
    }
});

---

Behold.

$(function() {
    var urls = [
        'http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #cadherins_',
        'http://iamwhitebox.com/staging/arkitek/includes/work-info.inc #ascent_',
        ..etc..
    ];
    for(var i=0;i<urls.length;i++){
        var index = i+1;
        $(".cell_"+index+" a").live('mouseover', function(){
            $('#gridInfo').fadeIn(100).load(urls[i]);
        });
        $(".cell_"+index+" a").live('mouseout', function(){
            $('#gridInfo').fadeOut(100);
        });
    }
});

for the loading thing see here How to cancel a jquery.load()?