[英]controlling the animation of fade in and fade out
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.
我可以通过任何方式使淡入也变得平滑。
Instead of: 代替:
$(this).appendTo($('#ticker')).css('opacity', 1);
Do something like: 做类似的事情:
$(this).appendTo($('#ticker')).animate({'opacity' : 1}, 2000);
It would be easier and more concise if you used the jQuery effects .fadeIn(time_in_ms)
& .fadeOut(time_in_ms)
. 如果您使用jQuery效果
.fadeIn(time_in_ms)
和.fadeOut(time_in_ms)
会更容易,更简洁。 More info here: http://api.jquery.com/fadeIn/ & http://api.jquery.com/fadeOut/ . 此处的更多信息: http : //api.jquery.com/fadeIn/和http://api.jquery.com/fadeOut/ 。
example: $('#ticker li:first').fadeIn(1000);
例如:
$('#ticker li:first').fadeIn(1000);
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/ http://jsfiddle.net/ffe6q/3/
One item is shown at a time, and the displayed item fades out then the next item fades in. 一次显示一个项目,然后所显示的项目淡出,然后下一个项目淡入。
If you are trying to make a slideshow, this is what I came up with. 如果您要制作幻灯片,这就是我想出来的。 The css:
CSS:
ul{position: relative;}
li{position: absolute;}
li:not(:first-child){display: none;}
and the js: 和js:
function tick(){
$('#ticker > li:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#ticker');
}
setInterval(function(){ tick () }, 8000);
var $ticker = $('#ticker'); var $ ticker = $('#ticker');
$ticker.children(':not(:first-child)').hide(); $ ticker.children(':not(:first-child)')。hide();
function tick(){ 函数tick(){
$ticker.children(':first-child').fadeOut(1000, function () {
$(this).appendTo($ticker);
$ticker.children().first().fadeIn(1000);
});
} setInterval(tick, 8000) } setInterval(tick,8000)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.