دورة jquery للمبتدئين الدرس السادس


فهاد الدرس السادس من دورة jquery للمبتدئين غادي نكملوا الدورة ديالنا فهاد الجزء غادي نشوفوا المزيد من les effets ف jquery منبعد غادي نشوفوا واحد الحاجة مهمة ف javascript عموما لي هي ل callback function ولي خاصك تعرفها ضروري.


1- ل MÉTHODE fadeToggle ف JQUERY

فل méthode fadeToggle ف jquery كتدير بحال toggle لي شفنا قبل فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فقط بدلنا ال méthode من fadeOut ل fadeToggle.
- فملي نكليكي على ل bouton كان ل h3 باين غادي يختفي مكانش غادي يتعرض.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 mx-auto mt-2">
                <h3>DCoding</h3>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $('h3').fadeToggle(1000);
            });
        });
    </script>
</body>
</html>
                            

2- ل MÉTHODE slideUp ف JQUERY

فل méthode slideUp ف jquery كتدير بحال fadeOut لي شفنا قبل فقط ل effet مبدل فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فقط بدلنا ال méthode من fadeToggle ل slideUp.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 mx-auto mt-2">
                <h3 style="">DCoding</h3>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $('h3').slideUp(1000);
            });
        });
    </script>
</body>
</html>
                            

3- ل MÉTHODE slideDown ف JQUERY

فل méthode slideDown ف jquery كتدير بحال fadeIn لي شفنا قبل فقط ل effet مبدل فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فقط بدلنا ال méthode من slideUp ل slideDown.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 mx-auto mt-2">
                <h3 style="display:none">DCoding</h3>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $('h3').slideDown(1000);
            });
        });
    </script>
</body>
</html>
                            

4- ل MÉTHODE slideToggle ف JQUERY

فل méthode slideToggle ف jquery كتدير بحال fadeToggle لي شفنا قبل فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فقط بدلنا ال méthode من slideDown ل slideToggle.
- فملي نكليكي على ل bouton كان ل h3 باين غادي يختفي مكانش غادي يتعرض.
الكود لي زدنا هو :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 mx-auto mt-2">
                <h3 style="display:none">DCoding</h3>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $('h3').slideToggle(1000);
            });
        });
    </script>
</body>
</html>
                                

5- كيفاش نتعامل مع ل callback function ف jquery

فل الكود ف jquery وف javascript عموما كيتنفذ سطر بعد سطر ولكن فبعض الأوقات يقدر يتنفذ الكود كامل فنفس الوقت فالمثال لي عندنا فالكود الأول :
فاش كنكليكي على ل bouton كيختفي ل h3 وكيتعرض ميساج وخا انا بغيت حتى يختفي ل h3 عاد يبان ل ميساج فالميساج هو لي كيتعرض الأول عاد يختفي ل h3 كيف كنشوف فالصورة :


هنا كيجي الدور ديال ل callback function فالكود الثاني زدت ل callback function فحتى كيختفي ال h3 عاد كيبان لميساج كيف كنشوف فالصورة :


الكود لي زدنا هو :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 mx-auto mt-2">
                <h3>DCoding</h3>
                <button id="btn">click</button>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            //code 1
            // $('#btn').click(function(){
            //     $('h3').hide();
            //     alert('bonjour');
            // });
            //code 2
            $('#btn').click(function(){
                $('h3').hide(function(){
                    alert('bonjour');
                });
            });
        });
    </script>
</body>
</html>