آموزش افکت فید شدن و اسلاید شدن لیستی از آیتم ها با jquery

اگر شما لیستی از آیتم ها را دارید که میخواهید به حالت fade یا slide شدن به کاربران سایت نمایش داده شود، میتوانید از این آموزش jquery استفاده کنید.

دموی این کد را از این قسمت مشاهده کنید.

[free_vip]

ابتدا باید کدهای جی کوئری زیر را فراخوانی کنید :

[html]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
/*
=InnerFade
————————————————-*/
$(document).ready(
        function(){
            $(‘#news’).innerfade({
                animationtype: ‘fade’,
                speed: 750,
                timeout: 2000,
                type: ‘sequence’,
                containerheight: ‘1em’
            });
    });
</script>
[/html]

همان طور که مشاهده میکنید میتوانید آپشن های مختلف مانند سرعت و … را برای این لیست تعیین کنید. برای حالت اسلاید شدن لیست آیتم هاباید مقدار

animationtype  را “slide” بگذارید.

سپس کدهای html را بصورت زیر مینویسیم :

کدهای html :

[html]
<ul id="news">   <li> <a href="#">1 Lorem ipsum dolor</a> </li>   <li> <a href="#">2 Sit amet, consectetuer</a> </li>   <li> <a href="#">3 Sdipiscing elit,</a> </li>   <li> <a href="#">4 sed diam nonummy nibh euismod tincidunt ut</a> </li>   <li> <a href="#">5 Nec Lorem.</a> </li>   <li> <a href="#">6 Et eget.</a> </li>   <li> <a href="#">7 Leo orci pede.</a> </li>   <li> <a href="#">8 Ratio randorus wil.</a> </li> </ul>
[/html]

[onliner_button type=”edu-demo” url=’https://onliner.ir/demo-education/jquery/fade&slide-list-item/fade&slide-list-item-onliner.ir.zip’]دانلود دمو[/onliner_button]

[/free_vip]

دیدگاه خود را برای ما ارسال کنید

No Comments