• افکت های جی کوئری
    #1
    Note 
    سلام اینا لیست افکتهای پایه ای جی کوئری هستن که میتونید همراه با مثالشون ببینید:

    ()SHOW:
    کد اصلی:
    [JS]$( ".target" ).show();[/JS]
    مثال:
    [HTML]<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>show demo</title>
    <style>
    p {
    background: yellow;
    }
    </style>
    <script src="http//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
    <button>Show it</button>
    <p style="display: none">Hello 2</p>
    <script>
    $( "button" ).click(function() {
    $( "p" ).show( "slow" );
    });
    </script>
    </body>
    </html>[/HTML]


    ()HIDE:
    کد اصلی:
    [JS]$( ".target" ).hide();[/JS]

    مثال:
    [HTML]<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>hide demo</title>
    <script src="http//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
    <p>Hello</p>
    <a href="#">Click to hide me too</a>
    <p>Here is another paragraph</p>
    <script>
    $( "p" ).hide();
    $( "a" ).click(function( event ) {
    event.preventDefault();
    $( this ).hide();
    });
    </script>
    </body>
    </html>[/HTML]

    ()SLIDEDOWN:
    کد اصلی:
    [JS]$( "#book" ).slideDown("slow");[/JS]

    مثال:[HTML]
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>slideDown demo</title>
    <style>
    div {
    background: #de9a44;
    margin: 3px;
    width: 80px;
    height: 40px;
    display: none;
    float: left;
    }
    </style>
    <script src="http//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
    Click me!
    <div></div>
    <div></div>
    <div></div>
    <script>
    $( document.body ).click(function () {
    if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
    } else {
    $( "div" ).hide();
    }
    });
    </script>
    </body>
    </html>[/HTML]


    ()SLIDEUP:

    کد اصلی:
    [JS]$( "#book" ).slideUp("slow");[/JS]

    مثال:
    [HTML]<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>slideUp demo</title>
    <style>
    div {
    background: #3d9a44;
    margin: 3px;
    width: 80px;
    height: 40px;
    float: left;
    }
    </style>
    <script src="http//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
    Click me!
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
    $( document.body ).click(function() {
    if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).show( "slow" );
    } else {
    $( "div" ).slideUp();
    }
    });
    </script>
    </body>
    </html>[/HTML]

    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان