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

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

- - jquery מה הבעיה פה? (https://hosts.co.il/forums/showthread.php?t=86691)

jquery מה הבעיה פה?

למה הפונקציה הזאת קודם משנה צבע ורק אחרי זה היא מבצעת פקודות ולא קודם פקודות ואז שינוי צבע כמו שזה אמור לעשות?

הפונקציה היא :

HTML קוד:

function fd(){

            $("#thisdiv").fadeTo("slow" , 0.25);

            $("#thisdiv").animate({height:10},"slow");

            $("#thisdiv").hide("slow");

            $('#thisdiv').css("background-color", "yellow");

            $("#thisdiv").show("slow");

            $("#thisdiv").animate({height:300},"slow");

            $("#thisdiv").fadeTo("slow" , 1);

            

        }

והדף המלא הוא :

HTML קוד:

<html>



<head>

    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>

    <script type="text/javascript">

        function fd(){

            $("#thisdiv").fadeTo("slow" , 0.25);

            $("#thisdiv").animate({height:10},"slow");

            $("#thisdiv").hide("slow");

            $('#thisdiv').css("background-color", "yellow");

            $("#thisdiv").show("slow");

            $("#thisdiv").animate({height:300},"slow");

            $("#thisdiv").fadeTo("slow" , 1);

            

        }

    </script>

    <style type="text/css">

        .tdiv{

            height: 300px;

            width:300px;

            background-color:blue;

        }

    </style>

</head>

<body>



<div id="thisdiv" class="tdiv"></div>

<button onclick="fd()">to hide</button>



</body>

</html>

אז מהיא הבעיה?
תודה.

התשובה היא שכל הפקודות מבוצעות אחת אחרי השני, אבל הן לא מחכות לכך שהקודמת תסיים.
כדי שהיא תסיים עליך להשתמש ב-callback.
כמו כן אני ממליץ לשמור את ה-thisdiv שלך בתוך משתנה לשיפור היעילות על מנת לא לבחור אותו כל פעם מחדש ולהפוך אותו לאובייקט jQuery.

קוד:

function fd(){

            var div = $("#thisdiv");

            div.fadeTo("slow" , 0.25, function(){

                div.animate({height:10},"slow", function(){

                    div.hide("slow", function(){

                           //תמשיך פה

                    });

                });             

            });

            

        }

תודה על התיקון והעצה.