Question

我正在尝试创建一个文本动画;这个想法是一些文本将从右侧移动到左侧并在五秒后消失。

我开发了以下代码，它运行正常。 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

在此先感谢：）

Answer 1

您的标记中存在错误，但除此之外，您还可以使用递归和回调模式：

更新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();

Answer 2

首先，我希望你使用class =“magic”而不是id =“magic”，但超越了我想象你只会使用“each”迭代器：

$（'span.magic'）。each（function（intIndex）{

$（this）.animate（{... yada yada yada

}）;

Answer 3

试试这个：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);
        });
});

干杯

Answer 4

我创建了一个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); 
}

jquery：单独调整跨越内部的文本

4 个答案: