控制淡入和淡出的動畫

Question

我有以下標記。

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

問題在於文本可以很好地淡出，但會再次閃爍。 我可以通過任何方式使淡入也變得平滑。

Answer 1

代替：

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

做類似的事情：

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

Answer 2

檢查FIDDLE

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

Answer 3

如果您使用jQuery效果.fadeIn(time_in_ms)和.fadeOut(time_in_ms)會更容易，更簡潔。 此處的更多信息： http : //api.jquery.com/fadeIn/和http://api.jquery.com/fadeOut/ 。

例如： $('#ticker li:first').fadeIn(1000);

Answer 4

這個怎么樣？

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

的jsfiddle基於susanth Reddy的

Answer 5

我認為您想要的是更多這樣的東西：

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/

一次顯示一個項目，然后所顯示的項目淡出，然后下一個項目淡入。

Answer 6

如果您要制作幻燈片，這就是我想出來的。 CSS：

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

和js：

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

Answer 7

var $ ticker = $（'＃ticker'）;

$ ticker.children（'：not（：first-child）'）。hide（）;

函數tick（）{

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

    $(this).appendTo($ticker);

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

});

} setInterval（tick，8000）