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

[hi_sorie]

יש לי בעיה עם אפקט שיצרתי...

http://www.cleo-c.co.il/

יש את התפריט צד של הטיפולי פנים ובלה בלה,

עכשיו האפקט עובד בצורה טובה שעוברים אחד אחד, אבל אם יורדים בבת אחת לאורך כל הכפתורים הוא עושה fadein ו fadeout פעמיים לאותה תמונה למרות שיצרתי תנאי שאם מספר ה li שווה ל li הספציפי לא להכנס לשינוויים.

[BlueNosE]

אי אפשר להבין מזה כלום, תעתיק לפה את הקוד הרלוונטי בJS ובHTML.. ניסיתי להיכנס ל-Javascript, שמרת את הjQuery עם הקבצים האחרים והכל מסורבל נורא

[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? ואז זה מריץ את מספר הפעמים שהפונקציה רצה על האלמנט שאתה מצביע עליו כעת.

[hi_sorie]

נו ומה הפיתרון ?

[BlueNosE]

נסה להשתמש בhover עם unbind בפרמטר השני. לעוד מידע http://api.jquery.com/hover

[hi_sorie]

זה לא הולך... יש לך מושג למה ?

[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');
  });
});