Search code examples
jqueryhtmlcssfadecycle

Fade Cycle on Divs


I have some divs within a div which is within a div. The outer most div is .major_data then comes .commitment_box and then the sub-divs, .commitment. The commitments are in a fade cycle and so one fadeOut() and another fadeIn(). Here comes the problem, after the last div is fadeOut() the first don't come up. For more clearance see this fiddle.

JS:

function tick() {
    var $obj = $(".major_data .commitment_box .commitment");
    $obj.first().delay(1000).fadeOut(function () {
        $obj.first().insertAfter($obj.last());
        tick();
    });
}
tick();

HTML:

<div class="major_data">
    <div class="commitment_box">
        <div class="commitment">
            <p>Alex:</p>
            <p>He's works great.</p>
        </div>
        <div class="commitment">
            <p>Alex 1:</p>
            <p>He's works great.</p>
        </div>
        <div class="commitment">
            <p>Alex 2:</p>
            <p>He's works great.</p>
        </div>
        <div class="commitment">
            <p>Alex 3:</p>
            <p>He's works great.</p>
        </div>
        <div class="commitment">
            <p>Alex 4:</p>
            <p>He's works great.</p>
        </div>
    </div>
</div>

CSS:

.major_data .commitment_box {
    text-align: center;
    height: 40px;
    overflow: hidden;
}
.major_data .commitment_box .commitment p {
    display: inline-block;
}
.major_data .commitment_box .commitment p:first-child {
    font-weight: bold;
    margin-right: 20px;
}

You can see clearly in the fiddle what is the problem. After Alex 4... the first one doesnot come up.


Solution

  • You forgot to add a fadeIn() to the first obj. So after one cycle is gone, and you're hiding it, all your divs are set to display:none. Your code :

    function tick() {
        var $obj = $(".major_data .commitment_box .commitment");
        $obj.first().fadeIn().delay(1000).fadeOut(function () {
            $obj.first().insertAfter($obj.last());
            tick();
        });
    }
    tick();
    

    Updated demo : http://jsfiddle.net/hungerpain/NMSpx/1/