הוסטס - פורום אחסון האתרים הגדול בישראל

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - בעיית jquery עם אירוע mouseover (https://hosts.co.il/forums/showthread.php?t=85976)

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

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

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

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

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

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

HTML קוד:



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;

                }

        });

});

ציטוט:

נכתב במקור על ידי hi_sorie (פרסם 784743)

HTML קוד:



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

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

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

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

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

HTML קוד:



        $('#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 בגמר האנימציה.
לדוגמא ככה:

HTML קוד:

$('....').fadeIn(100, function(){

  $(this).fadeOut(500,function(){

    alert('end of animation');

  });

});