Want to improve my jQuery code, does what I want, just too ugly, IMO

Question

so I have this jQuery script below that works. But since I'm just learning jQuery, I'd like to take advantage of this working code and make it more terse.

Basically it removes a class which holds a background image, then makes a div visible which is a link to an area of the site. It seems overly repetitive to me. Thanks for the helppp.

THE CODE:

$(document).ready(function(){
    $('#res').live('mouseover',function(){
        $(this).removeClass('resume');
        $('#reslin').css('visibility','visible');   
    });

    $('#res').live('mouseout',function(){
        $(this).addClass('resume');
        $('#reslin').css('visibility','hidden');;   
    });

    $('#pro').live('mouseover',function(){
        $(this).removeClass('projects');
        $('#prolin').css('visibility','visible');
    });

    $('#pro').live('mouseout',function(){
        $(this).addClass('projects');
        $('#prolin').css('visibility','hidden');
    });

    $('#abo').live('mouseover',function(){
        $(this).removeClass('about');
        $('#abolin').css('visibility','visible');
    });

    $('#abo').live('mouseout',function(){
        $(this).addClass('about');
        $('#abolin').css('visibility','hidden');
    });

    $('#con').live('mouseover',function(){
        $(this).removeClass('contact');
        $('#conlin').css('visibility','visible');

    });

    $('#con').live('mouseout',function(){
        $(this).addClass('contact');
        $('#conlin').css('visibility','hidden');
    });
});

Answer 1

tshauck, here is a efficient solution for your problem without changing any of your existing HTML.

jQuery(document).function($) {

    var myClasses = {
        pro: 'projects',
        res: 'resume',
        abo: 'about',
        con: 'contact'
    }

    $('#res, #pro, #abo, #con').live('mouseenter', function() {
        $('#' + $(this).attr('id') + 'lin')
            .addClass(myClasses[$(this).attr('id')])
            .css('visibility', 'visible');

    }).live('mouseleave', function() {
        $('#' + $(this).attr('id') + 'lin')
            .addClass(myClasses[$(this).attr('id')])
            .css('visibility', 'hidden');
    });

});

Good luck.

Answer 2

Give each of the element groups the same class (i.e. res, pro, abo, con now have class className, and reslin, prolin, abolin, and conlin have class linClassName), then do this:

$(document).ready(function(){
    $('.className').live('mouseover',function(){
        $(this).removeClass('contact');
        $('.linClassName').css('visibility','visible');

    });

    $('.className').live('mouseout',function(){
        $(this).addClass('contact');
        $('.linClassName').css('visibility','hidden');
    });
});

You can also chain the event as suggested by Omar.