페이드 인 및 페이드 아웃 애니메이션 제어

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

나는 당신이 원하는 것은 더이 같은 생각 :

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 2

대신 :

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

수행과 같은 :

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

Answer 3

확인 FIDDLE

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

Answer 4

당신이 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 5

어때요? 를 기반으로

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 레디의

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.children (': not (: first-child)'). 숨기기();

기능 틱() {

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

    $(this).appendTo($ticker); 

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

}); 

} 하여 setInterval은