controlling the animation of fade in and fade out

Question

I have the following markup.

<ul id="ticker">
<li><q> Education, then, beyond all other devices of human origin, is the great equalizer of the conditions of men, the balance-wheel of the social machinery </q><cite>Horace Mann</cite></li>
<li><q> The roots of education are bitter, but the fruit is sweet </q><cite>Aristotle</cite></li>
<li><q> Education is what remains after one has forgotten everything he learned in school </q><cite>Albert Einstein</cite></li>
<li><q> Education is the most powerful weapon which you can use to change the world </q><cite>Nelson Mandela</cite></li>
<li><q> Formal education will make you a living; self-education will make you a fortune </q><cite>Jim Rohn</cite></li>
</ul>

And the Following script

<script>
function tick()
{
$('#ticker li:first').animate({'opacity':0}, 2000, function () { $(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tick () }, 8000);
</script>

The problem is the text fades out nicely but re-appears with a flash. Any way I can make the fade in also smooth.

score 4 · Answer 1 · answered Sep 26 '12 at 22:18

4

Instead of:

$(this).appendTo($('#ticker')).css('opacity', 1);

Do something like:

$(this).appendTo($('#ticker')).animate({'opacity' : 1}, 2000);

answered Sep 26 '12 at 22:18

ahren

16,803
5
50
70

score 2 · Answer 2 · edited Sep 26 '12 at 22:22

2

Check FIDDLE

function tick() {
    $('#ticker li:first').animate({
        'opacity': 0
    },2000, function() {
        $(this).appendTo($('#ticker')).animate({'opacity' : 1}, 2000);
    });
}
setInterval(function() {
    tick()
}, 8000);

edited Sep 26 '12 at 22:22

ahren

16,803
5
50
70

answered Sep 26 '12 at 22:21

Sushanth --

55,259
9
66
105

score 1 · Answer 3 · answered Sep 26 '12 at 22:22

1

It would be easier and more concise if you used the jQuery effects .fadeIn(time_in_ms) & .fadeOut(time_in_ms). More info here: http://api.jquery.com/fadeIn/ & http://api.jquery.com/fadeOut/.

example: $('#ticker li:first').fadeIn(1000);

answered Sep 26 '12 at 22:22

Stone

2,608
26
26

Simon · Answer 4 · 2012-09-26T22:46:08.650

1

How about this?

var $ticker = $('#ticker'); // save the static element
function tick(){
    $ticker.children().first().fadeOut(2000, function () {
        $(this).appendTo($ticker).fadeIn(500);
    });
}
setInterval(tick, 8000);

jsfiddle based on susanth reddy's

edited Sep 26 '12 at 22:46

answered Sep 26 '12 at 22:23

Simon

7,182
2
26
42

Note: not shure if children(':first-child') is actually faster than children().first(), had some tests around some time ago but don't find them atm. – Simon Sep 26 '12 at 22:35

score 1 · Accepted Answer · answered Sep 26 '12 at 22:47

1

I think what you want is something more like this:

var $ticker = $('#ticker'); // save the static element
$ticker.children(':not(:first-child)').hide();

function tick(){
    $ticker.children(':first-child').fadeOut(1000, function () {
        $(this).appendTo($ticker);
        $ticker.children().first().fadeIn(1000);
    });
}
setInterval(tick, 8000);

http://jsfiddle.net/ffe6q/3/

One item is shown at a time, and the displayed item fades out then the next item fades in.

answered Sep 26 '12 at 22:47

Shmiddty

13,847
1
35
52

I'm sure you've already got some styling in mind, so this was more for my personal enjoyment than anything, but have a look: http://jsfiddle.net/ffe6q/5/ – Shmiddty Sep 26 '12 at 23:06

score 1 · Answer 6 · answered Oct 06 '13 at 02:09

If you are trying to make a slideshow, this is what I came up with. The css:

ul{position: relative;}
li{position: absolute;}
li:not(:first-child){display: none;}

and the js:

function tick(){
  $('#ticker > li:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#ticker');
}
setInterval(function(){ tick () }, 8000);

score 0 · Answer 7 · answered Oct 07 '13 at 12:12

var $ticker = $('#ticker');

$ticker.children(':not(:first-child)').hide();

function tick(){

$ticker.children(':first-child').fadeOut(1000, function () {

    $(this).appendTo($ticker);

    $ticker.children().first().fadeIn(1000);

});

} setInterval(tick, 8000)

controlling the animation of fade in and fade out

7 Answers7

Linked