CODEWITHSUNDEEP
jqueryhtmlcssfade
Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

How can I fadeIn() first then fadeOut() then insertAfter()?

I have simple div fade cycle made. Some divs are in a outer div and that is in another outer div. I have a script written that cycles those divs by fading in and out. But there's a problem, the divs are faden out but are faden in.

See this fiddle and see that ugly effect.

JS:

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

When a the cycle repeats itself then the effect becomes right. How can I achieve the effect in the second cycle of the cycle?

Upvotes: 0

Views: 434

Answers (3)

Pevara
Pevara

Reputation: 14310

All you .commitment divs are already visisble when you first cycle trought them, so there is nothing for jQuery to fadeIn. The second round, they are hidden cause of the previous fadeOut, so the fadeIn does work this time.

The solution would be to initially hide your .commitment divs. I would do this by adding .commitment { display: none; } to your css.

Upvotes: 0

Khanh TO
Khanh TO

Reputation: 48982

Try this:

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

Use .fadeIn(1000) to avoid fading in immediately

DEMO

Or

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

DEMO

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150070

"But there's a problem, the divs are faden out but are faden in."

I assume you're trying to say that "the divs are not faded out" to begin with. If you're saying that you want the divs to all start out hidden so that then even the first one fades in just change the following line:

var $obj = $(".major_data .commitment_box .commitment");

...to this:

var $obj = $(".major_data .commitment_box .commitment").hide();

Upvotes: 3

Related Questions