jquery - Smoothing out glitchy javascript animation (logical issue) -

sorry misleading title. don't know how else word issue.

i'm working on website , i'm having problems transition between animations when rolling on these 2 icons. when roll mouse on either icon, animations run fine, when move on next icon, can see fades out , fades in immediately. looks bad.

you can see issue here: http://theromdepot.com/

now correct this, tried checking if either of images hovered when leaving icon, , if not, go ahead , return normal. if either of them hovered, change text , don't fade anything. reason, couldn't work no matter did , scrapped whole thing. if come solution, i'd grateful.

here's related javascript:

$(document).ready(function(){      $("#cartridge").hover(function(){         document.getelementbyid("archivetext").innerhtml = "view archive";           $("#archivetext").animate({opacity: 1}, 400);         $("#slogan").animate({opacity: 0}, 300);         $("#recent").animate({opacity: 0}, 400);         $("#cartridge").animate({opacity: 1}, 200);     }, function(){         $("#cartridge").animate({opacity: .9}, 200);         $("#archivetext").animate({opacity: 0}, 400);         $("#slogan").animate({opacity: 1}, 300);         $("#recent").animate({opacity: 1}, 400);     });      $("#manual").hover(function(){         document.getelementbyid("archivetext").innerhtml = "view manuals";         $("#archivetext").animate({opacity: 1}, 400);         $("#slogan").animate({opacity: 0}, 300);         $("#recent").animate({opacity: 0}, 400);         $("#manual").animate({opacity: 1}, 200);     }, function(){         $("#manual").animate({opacity: .9}, 200);         $("#archivetext").animate({opacity: 0}, 400);         $("#slogan").animate({opacity: 1}, 300);         $("#recent").animate({opacity: 1}, 400);      }); }); 

just in case, here's link whole source code: http://pastebin.com/di5kcz6n

you need use jquery's .stop() function. have call before every .animate() call, so:

$("#archivetext").stop().animate({opacity: 1}, 400); 

same goes .animate() calls didn't include here, present in pastebin.

$(".cartridge").mouseover(function(){     $(this).stop().animate({height: "+=20", width: "+=20"}, 200); }); $(".cartridge").mouseout(function(){     $(this).stop().animate({height: "-=20", width: "-=20"}, 200); }); 

by way, if use increments/decrements .animate(), may have strange side effects when mousing in , out fast, it's best if use absolute values, like:

$(".cartridge").mouseover(function(){     $(this).stop().animate({height: 300, width: 300}, 200); }); $(".cartridge").mouseout(function(){     $(this).stop().animate({height: 280, width: 280}, 200); }); 

and while you're @ it, take , incorporate part of script posted, you'll have animation behavior in 1 place:

$("#cartridge").hover(function(){     document.getelementbyid("archivetext").innerhtml = "view archive";       $("#archivetext").stop().animate({opacity: 1}, 400);     $("#slogan").stop().animate({opacity: 0}, 300);     $("#recent").stop().animate({opacity: 0}, 400);     $("#cartridge").stop().animate({opacity: 1, height: 300, width: 300}, 200); }, function(){     $("#cartridge").stop().animate({opacity: .9, height: 280, width: 280}, 200);     $("#archivetext").stop().animate({opacity: 0}, 400);     $("#slogan").stop().animate({opacity: 1}, 300);     $("#recent").stop().animate({opacity: 1}, 400); });