控制淡入和淡出的动画 [英] controlling the animation of fade in and fade out

问题描述

我有以下标记。

<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>

以下脚本

<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.

推荐答案

我想你想要的是更像这样：

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.

这篇关于控制淡入和淡出的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！