تاپیک مرجع اصلی jQuery

Question

hamid_sub7 9 سال پیش 8 سال پیش

+3 0

با عرض سلامی گرم خدمت دوستان عزیز قصد دارم در این تاپیک به آموزش مباحث مبتدی تا پیشرفته jQuery بپردازم و از تمام دوستان عزیزم درخواست دارم هرگونه سوال در رابطه با مباحث jQuery البته خارج از مباحث Ajax را در این تاپیک مطرح کنند تا بتوانیم این تاپیک را به یک مرجع از آموزش ها و سوالات jQuery تبدیل کنیم و همانطور که شاید بعضی هاتون بدونید این تاپیک همزمان با تاپیک مرجع اصلی SQL ایجاد گردیده و بصورت موازی هر دو با هم آپدیت خواهند شد تا بلکه هر دو بتوانند قدمی کوچک در حل مشکلات برنامه نویسی دوستان باشند البته نیازمند به همکاری تمام دوستان میباشیم.

هرگونه پیشنهاد و یا انتقادی رو دارید دوستان عزیزم بصورت نظر در همین قسمت درج کنید تا باعث بی نظمی در کل تاپیک نشود با تشکر از کل دوستان گلم %

+1 0

یک دمو هم از کدهاتون در سایتی مثل لینک ثبت کنید تا اجرای کد دیده بشه. (9 سال پیش)

Answer 1

پاسخ به سوال

hamid_sub7 9 سال پیش

+3 0

ابتدا با توجه به آموزش های استاد نیز میدانید که برای کار با jQuery ابتدا باید فایل آن را از سایت رسمی www.jQuery.com/download فایل jQuery البته فایل فشرده یا همان min بهتر میباشد برای کسب اطلاعات بیشتر در این زمینه میتوانید به قسمت 5ام آموزش های استاد مراجعه کنید.

مثال 1 : ما میخواهیم یک المنت button در html بگذاریم و سپس با jquery بگویم هرگاه بروی button کلیک شد یک پیغام با alert نمایش دهد. البته ما در این مثال از دو روش استفاده خواهیم کرد. روش اول بیشتر مرسوم است و واضحتر میباشد و اما روش دوم روشی است که استاد در آموزش ها استفاده کرده اند و ما هم در این تاپیک از همین روش بخاطر اینکه این روش ملکه ذهن شود استفاده خواهیم کرد. اما این مثال را استثنا قائل شده ایم و هر دو روش را نشان داده ایم.

البته این مثال بسیار ساده است اما همانطور که در اول گفته ام قصد داریم تا مباحث خوبی jQuery را پیش بریم.

روش اول :

<html>
<head>
    <title>
        JQuery
    </title>

    <script src="lib/jquery.min.js">

    </script>

    <script type="text/javascript">
        
        $(document).ready(function(){
            
            $('#btn').click(function(){
                alert("Web Programing");
            });
            
        });

    </script>

</head>

<body>
<button id="btn">Click!</button>
</body>
</html>

روش دوم : (مطابق آموزش ها)

        $(function(){

            $('#btn').on('click',function(){
                alert("Web Programing");
            });

        });

در هر دو روش ابتدا به المنت html فرقی نداره چه المنتی باشد! ما اینجا button گذاشتیم یک id میدهیم و سپس چه در روش اول و چه در روش دوم ابتدا میگویم کل document خوانده شود و سپس المنت ها رو پیمایش کند اگر المنتی id آن btn بود آنگاه در رویداد کلیک آن گفته ایم یک alert را نمایش دهد.

مثال 2 : میخواهیم در فایل خود یک المنت div بگذاریم و متنی را در آن بنویسیم و سپس دو عدد المنت button میگذاریم یکی برای پنهان کردن المنت div و دیگری برای نمایش المنت div بنابراین بصورت زیر عمل خواهیم کرد :

 <html>
    <head>
        <title>
            JQuery
        </title>

        <script src="lib/jquery.min.js">

        </script>

        <script type="text/javascript">

            $(function(){
               $('#btnHide').on('click',function(){
                   $('#divText').hide(1000,function(){
                       alert("Hide");
                   });
               });
               $('#btnShow').on('click',function(){
                   $('#divText').show(1000,function(){
                       alert("Show");
                   });
               });
            });

        </script>
    </head>
<body>

<button id="btnHide">Hide!</button>
<button id="btnShow">Show!</button>
<br/>
<div id="divText">Sample Text</div>

</body>

</html>

البته در مثال بالا ما در تابع hide و show دو پارامتر برای هر کدام استفاده کرده ایم در پارامتر اول عدد 1000 به معنای 1 ثانیه است یعنی عمل پنهان سازی و نمایش دادن در 1 ثانیه اتفاق بیوفتد اما در پارامتر دوم نیز یک تابع را داده این و به این معنا میباشد که هر گاه تابع hide و show کار خود را به پایان رساندند تابع function یک alert نمایش دهد و بگوید که چه اتفاقی الان افتاده است! البته در پارامتر اول ما میتوانستیم به جای عدد از 'slow' و یا 'fast' استفاده کنیم اما معمولا چون میخواهیم بصورت دستی تنظیم کنیم و سرعت دلخواه ما بشود از عدد ثابت استفاده میکنیم.

مثال 3 : در این مثال میخواهیم همین عملیات hide و show را با یک المنت button بروی یک المنت دیگر انجام دهیم بنابراین خواهیم داشت :

 <html>
<head>
    <title>
        JQuery
    </title>

    <script src="lib/jquery.min.js">

    </script>

    <script type="text/javascript">

        $(function(){

            $('#btn').on('click',function(){
                $('#divText').toggle(1000,function(){
                    alert("JQuery");
                });
            });
        });

    </script>

</head>

<body>
<button id="btn">Hide & Show!</button>
<div id="divText">Sample Text</div>
</body>
</html>

در مثال های بعدی مباحث شیرین تر و به سمت کار با انیمیشن پیش خواهیم رفت %

ابتدا با توجه به آموزش های استاد نیز میدانید که برای کار با jQuery ابتدا باید فایل آن را از سایت رسمی www.jQuery.com/download فایل jQuery البته فایل فشرده یا همان min بهتر میباشد برای کسب اطلاعات بیشتر در این زمینه میتوانید به قسمت 5ام آموزش های استاد مراجعه کنید.

مثال 1 : ما میخواهیم یک المنت button در html بگذاریم و سپس با jquery بگویم هرگاه بروی button کلیک شد یک پیغام با alert نمایش دهد. البته ما در این مثال از دو روش استفاده خواهیم کرد. روش اول بیشتر مرسوم است و واضحتر میباشد و اما روش دوم روشی است که استاد در آموزش ها استفاده کرده اند و ما هم در این تاپیک از همین روش بخاطر اینکه این روش ملکه ذهن شود استفاده خواهیم کرد. اما این مثال را استثنا قائل شده ایم و هر دو روش را نشان داده ایم.

البته این مثال بسیار ساده است اما همانطور که در اول گفته ام قصد داریم تا مباحث خوبی jQuery را پیش بریم.

روش اول :

<html>
<head>
    <title>
        JQuery
    </title>

    <script src="lib/jquery.min.js">

    </script>

    <script type="text/javascript">
        
        $(document).ready(function(){
            
            $('#btn').click(function(){
                alert("Web Programing");
            });
            
        });

    </script>

</head>

<body>
<button id="btn">Click!</button>
</body>
</html>

روش دوم : (مطابق آموزش ها)

        $(function(){

            $('#btn').on('click',function(){
                alert("Web Programing");
            });

        });

در هر دو روش ابتدا به المنت html فرقی نداره چه المنتی باشد! ما اینجا button گذاشتیم یک id میدهیم و سپس چه در روش اول و چه در روش دوم ابتدا میگویم کل document خوانده شود و سپس المنت ها رو پیمایش کند اگر المنتی id آن btn بود آنگاه در رویداد کلیک آن گفته ایم یک alert را نمایش دهد.

مثال 2 : میخواهیم در فایل خود یک المنت div بگذاریم و متنی را در آن بنویسیم و سپس دو عدد المنت button میگذاریم یکی برای پنهان کردن المنت div و دیگری برای نمایش المنت div بنابراین بصورت زیر عمل خواهیم کرد :

 <html>
    <head>
        <title>
            JQuery
        </title>

        <script src="lib/jquery.min.js">

        </script>

        <script type="text/javascript">

            $(function(){
               $('#btnHide').on('click',function(){
                   $('#divText').hide(1000,function(){
                       alert("Hide");
                   });
               });
               $('#btnShow').on('click',function(){
                   $('#divText').show(1000,function(){
                       alert("Show");
                   });
               });
            });

        </script>
    </head>
<body>

<button id="btnHide">Hide!</button>
<button id="btnShow">Show!</button>
<br/>
<div id="divText">Sample Text</div>

</body>

</html>

البته در مثال بالا ما در تابع hide و show دو پارامتر برای هر کدام استفاده کرده ایم در پارامتر اول عدد 1000 به معنای 1 ثانیه است یعنی عمل پنهان سازی و نمایش دادن در 1 ثانیه اتفاق بیوفتد اما در پارامتر دوم نیز یک تابع را داده این و به این معنا میباشد که هر گاه تابع hide و show کار خود را به پایان رساندند تابع function یک alert نمایش دهد و بگوید که چه اتفاقی الان افتاده است! البته در پارامتر اول ما میتوانستیم به جای عدد از 'slow' و یا 'fast' استفاده کنیم اما معمولا چون میخواهیم بصورت دستی تنظیم کنیم و سرعت دلخواه ما بشود از عدد ثابت استفاده میکنیم.

مثال 3 : در این مثال میخواهیم همین عملیات hide و show را با یک المنت button بروی یک المنت دیگر انجام دهیم بنابراین خواهیم داشت :

 <html>
<head>
    <title>
        JQuery
    </title>

    <script src="lib/jquery.min.js">

    </script>

    <script type="text/javascript">

        $(function(){

            $('#btn').on('click',function(){
                $('#divText').toggle(1000,function(){
                    alert("JQuery");
                });
            });
        });

    </script>

</head>

<body>
<button id="btn">Hide & Show!</button>
<div id="divText">Sample Text</div>
</body>
</html>

در مثال های بعدی مباحث شیرین تر و به سمت کار با انیمیشن پیش خواهیم رفت %

0 0

سلام دوست عزیز من منظور از اولین خط در کد jquery بالا را متوجه نشدم میشه بگی چه کار می کنه (8 سال پیش)

Answer 2

ابتدا با توجه به آموزش های استاد نیز میدانید که برای کار با jQuery ابتدا باید فایل آن را از سایت رسمی www.jQuery.com/download فایل jQuery البته فایل فشرده یا همان min بهتر میباشد برای کسب اطلاعات بیشتر در این زمینه میتوانید به قسمت 5ام آموزش های استاد مراجعه کنید.

مثال 1 : ما میخواهیم یک المنت button در html بگذاریم و سپس با jquery بگویم هرگاه بروی button کلیک شد یک پیغام با alert نمایش دهد. البته ما در این مثال از دو روش استفاده خواهیم کرد. روش اول بیشتر مرسوم است و واضحتر میباشد و اما روش دوم روشی است که استاد در آموزش ها استفاده کرده اند و ما هم در این تاپیک از همین روش بخاطر اینکه این روش ملکه ذهن شود استفاده خواهیم کرد. اما این مثال را استثنا قائل شده ایم و هر دو روش را نشان داده ایم.

البته این مثال بسیار ساده است اما همانطور که در اول گفته ام قصد داریم تا مباحث خوبی jQuery را پیش بریم.

روش اول :

<html>
<head>
    <title>
        JQuery
    </title>

    <script src="lib/jquery.min.js">

    </script>

    <script type="text/javascript">
        
        $(document).ready(function(){
            
            $('#btn').click(function(){
                alert("Web Programing");
            });
            
        });

    </script>

</head>

<body>
<button id="btn">Click!</button>
</body>
</html>

روش دوم : (مطابق آموزش ها)

        $(function(){

            $('#btn').on('click',function(){
                alert("Web Programing");
            });

        });

در هر دو روش ابتدا به المنت html فرقی نداره چه المنتی باشد! ما اینجا button گذاشتیم یک id میدهیم و سپس چه در روش اول و چه در روش دوم ابتدا میگویم کل document خوانده شود و سپس المنت ها رو پیمایش کند اگر المنتی id آن btn بود آنگاه در رویداد کلیک آن گفته ایم یک alert را نمایش دهد.

مثال 2 : میخواهیم در فایل خود یک المنت div بگذاریم و متنی را در آن بنویسیم و سپس دو عدد المنت button میگذاریم یکی برای پنهان کردن المنت div و دیگری برای نمایش المنت div بنابراین بصورت زیر عمل خواهیم کرد :

 <html>
    <head>
        <title>
            JQuery
        </title>

        <script src="lib/jquery.min.js">

        </script>

        <script type="text/javascript">

            $(function(){
               $('#btnHide').on('click',function(){
                   $('#divText').hide(1000,function(){
                       alert("Hide");
                   });
               });
               $('#btnShow').on('click',function(){
                   $('#divText').show(1000,function(){
                       alert("Show");
                   });
               });
            });

        </script>
    </head>
<body>

<button id="btnHide">Hide!</button>
<button id="btnShow">Show!</button>
<br/>
<div id="divText">Sample Text</div>

</body>

</html>

البته در مثال بالا ما در تابع hide و show دو پارامتر برای هر کدام استفاده کرده ایم در پارامتر اول عدد 1000 به معنای 1 ثانیه است یعنی عمل پنهان سازی و نمایش دادن در 1 ثانیه اتفاق بیوفتد اما در پارامتر دوم نیز یک تابع را داده این و به این معنا میباشد که هر گاه تابع hide و show کار خود را به پایان رساندند تابع function یک alert نمایش دهد و بگوید که چه اتفاقی الان افتاده است! البته در پارامتر اول ما میتوانستیم به جای عدد از 'slow' و یا 'fast' استفاده کنیم اما معمولا چون میخواهیم بصورت دستی تنظیم کنیم و سرعت دلخواه ما بشود از عدد ثابت استفاده میکنیم.

مثال 3 : در این مثال میخواهیم همین عملیات hide و show را با یک المنت button بروی یک المنت دیگر انجام دهیم بنابراین خواهیم داشت :

 <html>
<head>
    <title>
        JQuery
    </title>

    <script src="lib/jquery.min.js">

    </script>

    <script type="text/javascript">

        $(function(){

            $('#btn').on('click',function(){
                $('#divText').toggle(1000,function(){
                    alert("JQuery");
                });
            });
        });

    </script>

</head>

<body>
<button id="btn">Hide & Show!</button>
<div id="divText">Sample Text</div>
</body>
</html>

در مثال های بعدی مباحث شیرین تر و به سمت کار با انیمیشن پیش خواهیم رفت %

Answer 3

پاسخ به سوال

hamid_sub7 9 سال پیش

+2 0

مثال 4 : در این مثال میخواهیم مثلا یک المنت img داریم و سپس دو المنت button هم داریم میخواهیم نام button اول را SlideUp و نام button دوم را SlideDown میگذاریم و میخواهیم وقتی بروی SlideUp کلیک کردیم تصویر بصورت کرکره ای به بالا جمع گردد و وقتی بروی SlideDown کلیک کردیم تصویر بصورت کرکره ای به پایین باز شود بنابراین خواهیم داشت :

<button id="btnSlideUp">SlideUp</button>
<button id="btnSlidDown">SlideDown</button>
<br/>
<img src="img/img.jpg" width="400px" height="300px" id="img">

ما دیگر برای کوتاه شدن سورس دیگر کل فایل html را قرار نمیدهیم در بخش اول المنت های لازم html و سپس سورس jQuery را قرار میدهیم.

     <script type="text/javascript">

        $(function(){

            $('#btnSlideUp').on('click',function(){
                $('#img').slideUp(1000);
            });

            $('#btnSlidDown').on('click',function(){
               $('#img').slideDown(1000);
            });

        });

    </script>

در ابتدا گفته ایم که سند html را یک بار مرور کن و سپس المنتی پیدا کردی که id آن btnSlideUp است و وقتی بروی آن کلیک شد یک function را در مدت 1 ثانیه انجام بده و در همان function گفته ایم که المنتی را که id آن img است را پیدا کن و با تابع slideUp آن را SlideUp کن. برای المنت btnSlideDown نیز به همین ترتیب عمل خواهیم کرد اما از تابع slideDown استفاده میکنیم.

مثال 5 : در این مثال میخواهیم همان مثال بالا را اما با یک المنت button انجام دهیم بنابراین خواهیم داشت :

<button id="btn">SlideUp & SlideDown</button>
<br/>
<img src="img/img.jpg" width="400px" height="300px" id="img">

خب در دستورات فوق المنت های html را که لازم داریم را تعریف میکنیم. و سپس در سورس jQuery خواهیم داشت :

 
    <script type="text/javascript">

        $(function(){

            $('#btn').on('click',function(){
               $('#img').slideToggle(1000);
            });

        });

    </script>

خب میبینیم که این تابع Toggle در اکثر مثال ها کاربرد جالبی دارد یعنی تابعی دو حالته میباشد.

اما یک یاد آوری مجدد بجای عدد 1000 میتوانیم از عباراتی مانند 'slow' و 'fast' و غیره استفاده کنیم اما ما همیشه در این آموزش ها از عدد 1000 استفاده خواهیم کرد. و همچنین مانند مثال 2 یک پارامتر دوم را مثلا یک function بدهیم که یک پیغامی را بعدی انجام کار چاپ کند یا هر عمل دیگری انجام شود که ما دیگر در این مثال صرف نظر کرده ایم چون در مثال های قبل نشان داده ایم.

مباحث مربوط به انیمیشن بعد چند مثال دیگر وارد مرحله جدی تر و بهتر خواهد شد %

مثال 4 : در این مثال میخواهیم مثلا یک المنت img داریم و سپس دو المنت button هم داریم میخواهیم نام button اول را SlideUp و نام button دوم را SlideDown میگذاریم و میخواهیم وقتی بروی SlideUp کلیک کردیم تصویر بصورت کرکره ای به بالا جمع گردد و وقتی بروی SlideDown کلیک کردیم تصویر بصورت کرکره ای به پایین باز شود بنابراین خواهیم داشت :

<button id="btnSlideUp">SlideUp</button>
<button id="btnSlidDown">SlideDown</button>
<br/>
<img src="img/img.jpg" width="400px" height="300px" id="img">

ما دیگر برای کوتاه شدن سورس دیگر کل فایل html را قرار نمیدهیم در بخش اول المنت های لازم html و سپس سورس jQuery را قرار میدهیم.

     <script type="text/javascript">

        $(function(){

            $('#btnSlideUp').on('click',function(){
                $('#img').slideUp(1000);
            });

            $('#btnSlidDown').on('click',function(){
               $('#img').slideDown(1000);
            });

        });

    </script>

در ابتدا گفته ایم که سند html را یک بار مرور کن و سپس المنتی پیدا کردی که id آن btnSlideUp است و وقتی بروی آن کلیک شد یک function را در مدت 1 ثانیه انجام بده و در همان function گفته ایم که المنتی را که id آن img است را پیدا کن و با تابع slideUp آن را SlideUp کن. برای المنت btnSlideDown نیز به همین ترتیب عمل خواهیم کرد اما از تابع slideDown استفاده میکنیم.

مثال 5 : در این مثال میخواهیم همان مثال بالا را اما با یک المنت button انجام دهیم بنابراین خواهیم داشت :

<button id="btn">SlideUp & SlideDown</button>
<br/>
<img src="img/img.jpg" width="400px" height="300px" id="img">

خب در دستورات فوق المنت های html را که لازم داریم را تعریف میکنیم. و سپس در سورس jQuery خواهیم داشت :

 
    <script type="text/javascript">

        $(function(){

            $('#btn').on('click',function(){
               $('#img').slideToggle(1000);
            });

        });

    </script>

خب میبینیم که این تابع Toggle در اکثر مثال ها کاربرد جالبی دارد یعنی تابعی دو حالته میباشد.

اما یک یاد آوری مجدد بجای عدد 1000 میتوانیم از عباراتی مانند 'slow' و 'fast' و غیره استفاده کنیم اما ما همیشه در این آموزش ها از عدد 1000 استفاده خواهیم کرد. و همچنین مانند مثال 2 یک پارامتر دوم را مثلا یک function بدهیم که یک پیغامی را بعدی انجام کار چاپ کند یا هر عمل دیگری انجام شود که ما دیگر در این مثال صرف نظر کرده ایم چون در مثال های قبل نشان داده ایم.

مباحث مربوط به انیمیشن بعد چند مثال دیگر وارد مرحله جدی تر و بهتر خواهد شد %

Answer 4

مثال 4 : در این مثال میخواهیم مثلا یک المنت img داریم و سپس دو المنت button هم داریم میخواهیم نام button اول را SlideUp و نام button دوم را SlideDown میگذاریم و میخواهیم وقتی بروی SlideUp کلیک کردیم تصویر بصورت کرکره ای به بالا جمع گردد و وقتی بروی SlideDown کلیک کردیم تصویر بصورت کرکره ای به پایین باز شود بنابراین خواهیم داشت :

<button id="btnSlideUp">SlideUp</button>
<button id="btnSlidDown">SlideDown</button>
<br/>
<img src="img/img.jpg" width="400px" height="300px" id="img">

ما دیگر برای کوتاه شدن سورس دیگر کل فایل html را قرار نمیدهیم در بخش اول المنت های لازم html و سپس سورس jQuery را قرار میدهیم.

     <script type="text/javascript">

        $(function(){

            $('#btnSlideUp').on('click',function(){
                $('#img').slideUp(1000);
            });

            $('#btnSlidDown').on('click',function(){
               $('#img').slideDown(1000);
            });

        });

    </script>

در ابتدا گفته ایم که سند html را یک بار مرور کن و سپس المنتی پیدا کردی که id آن btnSlideUp است و وقتی بروی آن کلیک شد یک function را در مدت 1 ثانیه انجام بده و در همان function گفته ایم که المنتی را که id آن img است را پیدا کن و با تابع slideUp آن را SlideUp کن. برای المنت btnSlideDown نیز به همین ترتیب عمل خواهیم کرد اما از تابع slideDown استفاده میکنیم.

مثال 5 : در این مثال میخواهیم همان مثال بالا را اما با یک المنت button انجام دهیم بنابراین خواهیم داشت :

<button id="btn">SlideUp & SlideDown</button>
<br/>
<img src="img/img.jpg" width="400px" height="300px" id="img">

خب در دستورات فوق المنت های html را که لازم داریم را تعریف میکنیم. و سپس در سورس jQuery خواهیم داشت :

 
    <script type="text/javascript">

        $(function(){

            $('#btn').on('click',function(){
               $('#img').slideToggle(1000);
            });

        });

    </script>

خب میبینیم که این تابع Toggle در اکثر مثال ها کاربرد جالبی دارد یعنی تابعی دو حالته میباشد.

اما یک یاد آوری مجدد بجای عدد 1000 میتوانیم از عباراتی مانند 'slow' و 'fast' و غیره استفاده کنیم اما ما همیشه در این آموزش ها از عدد 1000 استفاده خواهیم کرد. و همچنین مانند مثال 2 یک پارامتر دوم را مثلا یک function بدهیم که یک پیغامی را بعدی انجام کار چاپ کند یا هر عمل دیگری انجام شود که ما دیگر در این مثال صرف نظر کرده ایم چون در مثال های قبل نشان داده ایم.

مباحث مربوط به انیمیشن بعد چند مثال دیگر وارد مرحله جدی تر و بهتر خواهد شد %

Answer 5

پاسخ به سوال

hamid_sub7 9 سال پیش

+2 0

از این به بعد اگر مثالی را مانند مثال های قبل میتوانستیم از دو طریق انجام دهیم مثلا همان مثال Sliding که ما یک دکمه برای SlideUp و دکمه دیگر برای SlideDown گزاشتیم و همان مثال را به روش toggle با یک دکمه انجام دادیم از این به بعد چنین مثال ها را در یک مثال هر دو روش را می آوریم.

مثال 6 : در این مثال میخواهیم یک تصویر را FadeOut و FadeIn کنیم البته یک دکمه برای FadeOut و دکمه ی دیگری را برای FadeIn میگذاریم و در کنار همین روش میایم از روش دیگر عمل FadeOut و FadeIn را از روش toggle انجام میدهیم.

<html>
<head>
    <title>
        JQuery Test
    </title>

    <script src="lib/jquery.min.js">

    </script>

    <script type="text/javascript">

        $(function(){

            $('#btnFadeIn').on('click',function(){
                $('#img').fadeIn(1000);
            });

            $('#btnFadeOut').on('click',function(){
               $('#img').fadeOut(1000);
            });

            $('#btn').on('click',function(){
               $('#img').fadeToggle(1000);
            });

        });

    </script>

</head>

<body>
<button id="btnFadeIn">FadeIn</button>
<button id="btnFadeOut">FadeOut</button>
<button id="btn">FadeIn & FadeOut</button>
<br/>
<img src="img/img.jpg" width="400px" height="300px" id="img">
</body>
</html>

همان طور که مشاهده میکنید در قسمت Body سه عدد دکمه گذاشتیم که دو دکمه اول برای عملیات FadeOut و FadeIn و دکمه سوم برای عملیات FadeOut , FadeIn بصورت همزمان میباشد و یک img هم برای کار بروی آن گذاشتیم. و در قسمت jQuery نوشتیم هرگاه بر فلان دکمه کلیک شد بروی کنترل img فلان عملیات را در مدت زمان مشخص شده انجام دهد. توضیح بیشتری این مثال و مثال های بعدی نخواهد داشت زیرا همه مانند مثال های قبل هستند اما عملکرد تنها فرق دارد. بنابراین اگر سوالی در هر قسمت از مثال ها داشتید میتوانید در قسمت نظرها مطرح کنید تا پاسخ داده شود.

از این به بعد اگر مثالی را مانند مثال های قبل میتوانستیم از دو طریق انجام دهیم مثلا همان مثال Sliding که ما یک دکمه برای SlideUp و دکمه دیگر برای SlideDown گزاشتیم و همان مثال را به روش toggle با یک دکمه انجام دادیم از این به بعد چنین مثال ها را در یک مثال هر دو روش را می آوریم.

مثال 6 : در این مثال میخواهیم یک تصویر را FadeOut و FadeIn کنیم البته یک دکمه برای FadeOut و دکمه ی دیگری را برای FadeIn میگذاریم و در کنار همین روش میایم از روش دیگر عمل FadeOut و FadeIn را از روش toggle انجام میدهیم.

<html>
<head>
    <title>
        JQuery Test
    </title>

    <script src="lib/jquery.min.js">

    </script>

    <script type="text/javascript">

        $(function(){

            $('#btnFadeIn').on('click',function(){
                $('#img').fadeIn(1000);
            });

            $('#btnFadeOut').on('click',function(){
               $('#img').fadeOut(1000);
            });

            $('#btn').on('click',function(){
               $('#img').fadeToggle(1000);
            });

        });

    </script>

</head>

<body>
<button id="btnFadeIn">FadeIn</button>
<button id="btnFadeOut">FadeOut</button>
<button id="btn">FadeIn & FadeOut</button>
<br/>
<img src="img/img.jpg" width="400px" height="300px" id="img">
</body>
</html>

همان طور که مشاهده میکنید در قسمت Body سه عدد دکمه گذاشتیم که دو دکمه اول برای عملیات FadeOut و FadeIn و دکمه سوم برای عملیات FadeOut , FadeIn بصورت همزمان میباشد و یک img هم برای کار بروی آن گذاشتیم. و در قسمت jQuery نوشتیم هرگاه بر فلان دکمه کلیک شد بروی کنترل img فلان عملیات را در مدت زمان مشخص شده انجام دهد. توضیح بیشتری این مثال و مثال های بعدی نخواهد داشت زیرا همه مانند مثال های قبل هستند اما عملکرد تنها فرق دارد. بنابراین اگر سوالی در هر قسمت از مثال ها داشتید میتوانید در قسمت نظرها مطرح کنید تا پاسخ داده شود.

Answer 6

از این به بعد اگر مثالی را مانند مثال های قبل میتوانستیم از دو طریق انجام دهیم مثلا همان مثال Sliding که ما یک دکمه برای SlideUp و دکمه دیگر برای SlideDown گزاشتیم و همان مثال را به روش toggle با یک دکمه انجام دادیم از این به بعد چنین مثال ها را در یک مثال هر دو روش را می آوریم.

مثال 6 : در این مثال میخواهیم یک تصویر را FadeOut و FadeIn کنیم البته یک دکمه برای FadeOut و دکمه ی دیگری را برای FadeIn میگذاریم و در کنار همین روش میایم از روش دیگر عمل FadeOut و FadeIn را از روش toggle انجام میدهیم.

<html>
<head>
    <title>
        JQuery Test
    </title>

    <script src="lib/jquery.min.js">

    </script>

    <script type="text/javascript">

        $(function(){

            $('#btnFadeIn').on('click',function(){
                $('#img').fadeIn(1000);
            });

            $('#btnFadeOut').on('click',function(){
               $('#img').fadeOut(1000);
            });

            $('#btn').on('click',function(){
               $('#img').fadeToggle(1000);
            });

        });

    </script>

</head>

<body>
<button id="btnFadeIn">FadeIn</button>
<button id="btnFadeOut">FadeOut</button>
<button id="btn">FadeIn & FadeOut</button>
<br/>
<img src="img/img.jpg" width="400px" height="300px" id="img">
</body>
</html>

همان طور که مشاهده میکنید در قسمت Body سه عدد دکمه گذاشتیم که دو دکمه اول برای عملیات FadeOut و FadeIn و دکمه سوم برای عملیات FadeOut , FadeIn بصورت همزمان میباشد و یک img هم برای کار بروی آن گذاشتیم. و در قسمت jQuery نوشتیم هرگاه بر فلان دکمه کلیک شد بروی کنترل img فلان عملیات را در مدت زمان مشخص شده انجام دهد. توضیح بیشتری این مثال و مثال های بعدی نخواهد داشت زیرا همه مانند مثال های قبل هستند اما عملکرد تنها فرق دارد. بنابراین اگر سوالی در هر قسمت از مثال ها داشتید میتوانید در قسمت نظرها مطرح کنید تا پاسخ داده شود.