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


فهاد الدرس الخامس من دورة jquery للمبتدئين  غادي نكملو الدورة ديالنا وغادي ندوزو نشوفوا les effets.
ف les effets كيمكنوني باش نخفي أو نعرض واحد ل élément بعدة طرق مع إضافة بعض ل animation.
فحنا غادي نشوفو هادشي كامل فهاد الجزء. 


1- ل méthode hide ف jquery

فل méthode hide ف jquery كيف سبق وشفنا كتمكنا اننا نخفيو واحد العنصر ف DOM فالمثال لي عندنا :
زدنا bouton لي عطيناها id btn منبعد فالكود jquery استرجعناها
بل id وزدنالها فل event click ل fonction لي كتمكن من إخفاء ل h3 غير الفرق هنا زدنا بين القوسين السرعة باش غادي يختفي ل h3 ولي حددنا ف 1000 جزء من الثانية.
الكود لي زدنا هو :


                                <!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').hide(1000);
            });
        });
    </script>
</body>
</html>
                            

2- ل méthode show ف jquery

فل méthode show ف jquery عكس ل méthode hide كتعرض واحد ل élément لي كان مخفي فالمثال لي عندنا :
- زدنا لل h3 style css باش ميبانش par défault.
- منبعد فالكود jquery استرجعنا ل bouton كيف شفنا قبل ف hide 
بل id وزدنالها فل event click ل fonction show لي كتمكن من إظهار ل h3.
- بين القوسين زدنا السرعة باش غادي يظهر ل h3 ولي حددنا ف 1000 جزء من الثانية.
الكود لي زدنا هو :

                                <!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').show(1000);
            });
        });
    </script>
</body>
</html>
                            

3- ل méthode toggle ف jquery

فل méthode toggle ف jquery كتدير عكس الحاجة لي عليها واحد ل élément فمثلا يلا كان مخفي كتعرضو والعكس صحيح فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فقط بدلنا ال méthode من show ل toggle.
- فملي نكليكي على ل 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').toggle(1000);
            });
        });
    </script>
</body>
</html>
                            

4- ل méthode fadeIn ف jquery

فل méthode fadeIn ف jquery بحال méthode show كتعرض واحد ل élément لي كان مخفي غير كتزيد واحد ل effet شفاف فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فقط بدلنا ال méthode من toggle ل fadeIn وغيرنا السرعة ل 3000 جزء من الثانية باش يبان ل effet
الكود لي زدنا هو :

                                    <!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').fadeIn(3000);
            });
        });
    </script>
</body>
</html>
                                

5- ل méthode fadeOut ف jquery

فل méthode fadeOut ف jquery بحال méthode hide كتخفي واحد ل élément وهي عكس fadeIn فالمثال لي عندنا :
- احتفظنا بنفس الكود السابق فقط بدلنا ال méthode من fadeIn ل fadeOut الكود لي زدنا هو :

                                    <!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').fadeOut(1000);
            });
        });
    </script>
</body>
</html>