我正在尝试创建一个文本动画;这个想法是一些文本会从右边移到左边,五秒钟后就会消失。
我已经开发了以下代码,并且运行良好。jsfiddle但问题是,当我有多个带文本的spans
时,我不知道如何单独显示它们。
HTML
<span class="magic" >Magic1</span>
Jquery
<script>
var left = $('.magic').offset().left;
$(".magic").css({left:left}).animate({"left":"0px"}, 2000);
$(".magic").fadeOut(3000);
</script>
CSS
<style>
.magic {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
</style>
我有多个文本,如下所示,你能告诉我如何逐一显示/动画化它们,并在动画结束时从头开始吗?
<span class="magic" >Magic1</span>
<span class="magic" >magic2</span>
<span class="magic" >magic3</span>
// unlimited
提前感谢:)
标记中有错误,但除此之外,您还可以使用递归和回调模式:
更新2(归功于@Madbreaks):http://jsfiddle.net/JZzdp/6/
var magic = $('.magic'),
i = 0,
len = magic.length,
left = $('.container').width(); //SET THIS TO WHATEVER PARENT CONTAINER YOU ARE SLIDING INSIDE
var slide = function(){
magic.each( function( i ){
$( this ).delay( i*5000 ).fadeIn().animate({"right":"+="+left},2000, function(){
$( this ).fadeOut(3000).animate({ "right":"-="+left }, 0, function(){
if( i === len - 1 ){ slide(); }
});
});
});
}
slide();
首先,我希望您将使用class="magic"而不是id="magic",但除此之外,我想您只需使用"each"迭代器,如:
$('span.magic').each(函数(intIndex){
$(this).animate({…亚达亚达
});
我创建了一个jsFiddle,希望它是您想要的。我使用了jQuery的.delay()
函数来进行转换。你可以调整时间。
jsFiddle
var mLength = $(".magic").length;
for(var i = 1; i < mLength+1; i++){
var $magic = $("#magic"+i);
var offset = $magic.offset().left;
$magic.css({left:offset}).hide();
$magic.delay(7000*(i-1));
$magic.fadeIn(500);
$magic.animate({"left":"0px"}, 5000);
$magic.fadeOut(3000);
}
试试这个:jsfiddle
var left = $('.magic:first').offset().left;
$(".magic").each(function(i){
$(this)
.css({left:left})
.delay(i * 5000)
.animate({"left":"0px"}, 2000, function(){
$(this).fadeOut(3000);
});
});
干杯