Jquery :: Quickly Moving From Created Link To ParentSite

Not entirely lost in the dark with jquery here, I've done quite a bit with it. The code pretty much looks like this...
$('#created').hover(
function(){
if(y == false)
{
$(this).css({'border' : '1px groove #dfdfdf'});
$('div#csite').show('slide',{ direction: "down" },500);
$('div#sa').hide('slide',{ direction: "up" },500);
};
},
function()
{
$(this).css({'border-style' : 'none'});
$('div#csite').hide('slide',{ direction: "up" },500);
$('div#sa').show('slide',{ direction: "down" },500);
});

//home hover
$('#home').hover(
function(){
if(y == false)
{
$(this).css({'border' : '1px groove #dfdfdf'});
$('div#psite').show('slide',{ direction: "down" },500);
$('div#sa').hide('slide',{ direction: "up" },500);
};
},
function()
{
$(this).css({'border-style' : 'none'});
$('div#psite').hide('slide',{ direction: "up" },500);
$('div#sa').show('slide',{ direction: "down" },500);
});

The div sa is always present (its a sponsor logo). When hovering over a #created link or #parent site link, a div csite or psite comes up, (image representing parent site, image representing creator site). Making them work is no problem however I was wondering ow to change this so that when you are quickly moving from the created link to the parentsite the .hide and .show animation for #sa does not overlap, or does not fire otherwise they get in the way of each other...