בעיית jquery עם אירוע mouseover

[hi_sorie]

var texts = new Array("בלה בלה 1","בלה בלה 2","בלה בלה 3","בלה בלה 4","בלה בלה 5","בלה בלה 6");
var inout = true;
var curr;
var fade = 350;

	$('#cares ul li').mouseover(function() {
		
		// get the on li num and add 1 ( start at 0 )
		ItemNum = $(this).index()+1;

		if ((inout) && (curr != ItemNum)){
		inout = false;
		// set off all li;
		$('#cares ul li').each(function() {
			$(this).attr('class', "cares_li2");
		});
		// set on the curr li
		$(this).fadeOut(fade).attr('class', "cares_li1").fadeIn(fade);
		
$(document).ready(function() {
		
		// change the side pic
		$(".cares_si").fadeOut(fade).attr('src', wb_url+"/templates/home_temp/images/cares_si"+ItemNum+".png").fadeIn(fade);
		$(".cares_si").attr('title', texts[ItemNum-1]);
		$(".cares_si").attr('alt', texts[ItemNum-1]);
		$(".cares_si").simpletooltip();
		
		
		// change the text on the pic
		$("#cares_white_line").fadeOut(fade).html(texts[ItemNum-1]).fadeIn(fade);
		
		curr = ItemNum;
		inout = true;
		}
	});
});

[benb]

נכתב במקור על ידי hi_sorie

var texts = new Array("בלה בלה 1","בלה בלה 2","בלה בלה 3","בלה בלה 4","בלה בלה 5","בלה בלה 6");
var inout = true;
var curr;
var fade = 350;

	$('#cares ul li').mouseover(function() {
		
		// get the on li num and add 1 ( start at 0 )
		ItemNum = $(this).index()+1;

		if ((inout) && (curr != ItemNum)){
		inout = false;
		// set off all li;
		$('#cares ul li').each(function() {
			$(this).attr('class', "cares_li2");
		});
		// set on the curr li
		$(this).fadeOut(fade).attr('class', "cares_li1").fadeIn(fade);
		
$(document).ready(function() {
		
		// change the side pic
		$(".cares_si").fadeOut(fade).attr('src', wb_url+"/templates/home_temp/images/cares_si"+ItemNum+".png").fadeIn(fade);
		$(".cares_si").attr('title', texts[ItemNum-1]);
		$(".cares_si").attr('alt', texts[ItemNum-1]);
		$(".cares_si").simpletooltip();
		
		
		// change the text on the pic
		$("#cares_white_line").fadeOut(fade).html(texts[ItemNum-1]).fadeIn(fade);
		
		curr = ItemNum;
		inout = true;
		}
	});
});

אני חושב שבגלל הפונקציה של FADEIN FADEOUT כי אם אתה עובר מהר אז יש תור של פונקציות שמחכות לרוץ ולעשות את האפקט והן כל פעם שואלות THIS? ואז זה מריץ את מספר הפעמים שהפונקציה רצה על האלמנט שאתה מצביע עליו כעת.

[IgalSt]

ראיתי כמה דברים לא כ"כ "נכונים" בקוד שלך, ראה הערות שלי:

	$('#cares ul li').mouseover(function() {
		
		// get the on li num and add 1 ( start at 0 )
		ItemNum = $(this).index()+1; //use ++ and when adding +1

		if ((inout) && (curr != ItemNum)){
		inout = false;
		// set off all li;
		$('#cares ul li').each(function() {  //there is no need for "each" here
			$(this).attr('class', "cares_li2"); //using "addClass"/"removeClass" is more "reader friendly"
		});

ובקשר לבעיה עצמה:
לדגעתי עליך לעבוד עם ה-callback של fadeOut/fadeIn
ככל הנראה אתה מבצע שינויים לפני שהאנימציה הסתיימה ולכן הכל נדפק.
ראה בריפרנס של fadeOut/fadeIn אפשרות לביצוע callback בגמר האנימציה.
לדוגמא ככה:

$('....').fadeIn(100, function(){
  $(this).fadeOut(500,function(){
    alert('end of animation');
  });
});