animaton ها در jQuery

قبلی

متحرک سازی(animation) در jquery

متد animate() در jquery به ما این اجازه را می دهد که تگ های HTML را در صفحه به حرکت درآوریم.

$(selector).animate({params},speed,callback);

پارامتر الزامی params آن تگ CSS که می خواهید animation بر روی آن ها اعمال شوند را تعریف می کند یک یا چندین تگ دلخواه CSS برای متحرک سازی مشخص می کند.

در مثال زیر تگ <div>, را بت زدن دکمه 300 px به سمت چب هدایت میکنیم

        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({ left: '300px' });
            });
        });

در مثال زیر چند تگ css را برای تگ <div> در نظر گرفتیم

250 px به سمت چب برود
شفافیت ان برابر شود با 0.7
عرض ان 150px
طول ان 150px

        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({
                    left: '250px',
                    opacity: '0.7',
                    height: '150px',
                    width: '150px'
                });
            });
        });

استفاده از += و -=

یعنی استفاده از مقادیر نسبی , ما این رو برای شما در د. مثال توضیح میدهیم

1: +=

در مثال زیر انتخاب گر ما با هر بار کلیک 150 px به طول و عرض انتخابگر اضافه میشود

اما فقط یک بار 250px به سمت چپ میرود

    $(document).ready(function () {
        $("button").click(function () {
            $("div").animate({
                left: '250px',
                height: '+=150px',
                width: '+=150px'
            });
        });
    });

2: -=

در مثال زیر همچی مانند مانند مثال بالا است فقط با این تفاوت که با هز بار کلیک 50px کوچکتر میشود

    $(document).ready(function () {
        $("button").click(function () {
            $("div").animate({
                left: '250px',
                height: '-=50px',
                width: '-=50px'
            });
        });
    });

قابلیت queue

قابلیت queue در jquery به چه دردی میخورد ؟

قابلیت queue هنگام نوشتن چندین دستور ()animate پشت سرهم، jQuery یک صف داخلی برای آن ها ایجاد کرده، سپس آن ها را یکی پس از دیگری صدا می زند

به مثال زیر دقت کنید

        $(document).ready(function () {
            $("button").click(function () {
                var div = $("div");
                div.animate({ height: '300px', opacity: '0.4' }, "slow");
                div.animate({ width: '300px', opacity: '0.8' }, "slow");
                div.animate({ height: '100px', opacity: '0.4' }, "slow");
                div.animate({ width: '100px', opacity: '0.8' }, "slow");
            });
        });

در مثال زیر انتخابگر به سمت چپ میرود و فونت نوشته بزرگ میشود

        $(document).ready(function () {
            $("button").click(function () {
                var div = $("div");
                div.animate({ left: '100px' }, "slow");
                div.animate({ fontSize: '3em' }, "slow");
            });
        });

قبلی

توسعه دهندگان

آریان آذر