شما در این مقاله یاد میگیرید تا چگونه محتویات div را به صورت مرحله به مرحله لود کنید البته این کار با افزودن یکسری از پلاگین ها امکان پذیر است اما همیشه بهتر است تا از افزودن پلاگین های ناخواسته جلوگیری کنید.

مثلا فرض کنید شما بر روی وب سایت خود  چند روزی است که کار می کنید و دلتان می خواهد از میان چندین آیتم یکی را در div  نمایش دهید.

کد:

در ابتدا ما به محتوا نیازمندیم که مثلا مانند زیر است:

    <div id="fades">  
        <div>  
            <h3>  
                "Welcome to <b>Sibeesh|Passion</b>. Thanks a lot for visiting. Come again!!!"  
            </h3>  
            <p style="text-align: right;">  
                - Sibeesh Venu  
            </p>  
        </div>  
        <div>  
            <h3>  
                "If debugging is the process of removing software bugs, then programming must be  
                the process of putting them in. "  
            </h3>  
            <p style="text-align: right;">  
                - Edsger Dijkstra  
            </p>  
        </div>  
        <div>  
            <h3>  
                "Walking on water and developing software from a specification are easy if both  
                are frozen. "  
            </h3>  
            <p style="text-align: right;">  
                - Edward V Berard  
            </p>  
        </div>  
        <div>  
            <h3>  
                "It's not at all important to get it right the first time. It's vitally important  
                to get it right the last time."  
            </h3>  
            <p style="text-align: right;">  
                - Andrew Hunt and David Thomas  
            </p>  
        </div>  
        <div>  
            <h3>  
                "First, solve the problem. Then, write the code. "  
            </h3>  
            <p style="text-align: right;">  
                - John Johnson  
            </p>  
        </div>  
        <div>  
            <h3>  
                "Should array indices start at 0 or 1? My compromise of 0.5 was rejected without,  
                I thought, proper consideration. "  
            </h3>  
            <p style="text-align: right;">  
                - Stan Kelly-Bootle  
            </p>  
        </div>  
        <div>  
            <h3>  
                "Always code as if the guy who ends up maintaining your code will be a violent psychopath  
                who knows where you live. "  
            </h3>  
            <p style="text-align: right;">  
                - Rick Osborne  
            </p>  
        </div>  
        <div>  
            <h3>  
                "Any fool can write code that a computer can understand. Good programmers write  
                code that humans can understand. "  
            </h3>  
            <p style="text-align: right;">  
                - Martin Fowler  
            </p>  
        </div>  
        <div>  
            <h3>  
                "Software sucks because users demand it to. "  
            </h3>  
            <p style="text-align: right;">  
                - Nathan Myhrvold  
            </p>  
        </div>  
        <div>  
            <h3>  
                "Beware of bugs in the above code; I have only proved it correct, not tried it.  
                "  
            </h3>  
            <p style="text-align: right;">  
                - Donald Knuth  
            </p>  
        </div>  
        <div>  
            <h3>  
                " There is not now, nor has there ever been, nor will there ever be, any programming  
                language in which it is the least bit difficult to write bad code. "  
            </h3>  
            <p style="text-align: right;">  
                - Flon's Law  
            </p>  
        </div>  
    </div>  

حالا در این جا باید کد های jquery را بنویسیم:

    <script type="text/javascript">  
        $(document).ready(function () {  
            $("body").floatingShare();  
            // First hide them all  
            $("#fades div").hide();  
            function fades($div, cb) {  
                $div.fadeIn(10000, function () {  
                    $div.fadeOut(10000, function () {  
                        var $next = $div.next();  
                        if ($next.length > 0) {  
                            fades($next, cb);  
                        }  
                        else {  
                            // The last element has faded away, call the callback  
                            cb();  
                        }  
                    });  
                });  
            }  
            function startFading($firstDiv) {  
                fades($firstDiv, function () {  
                    startFading($firstDiv);  
                });  
            }  
            startFading($("#fades div:first-child"));  
        });  
    </script>  

در ضمن فراموش نکنید که jquery مربوطه را باید لود کنید.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>