0

嗨，我有一个功能，我想每次使用不同的 ID 标签循环。单击导航链接时调用此函数。到目前为止，我有这个，我想将 txt1 更改为 txt2，然后将 txt 3 更改为 txt5，从而一个接一个地播放每个动画。谢谢！

function animetxt(){
$o=$("#txt1");
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('display','inline-block');
$('span',$o).stop().css({position:'relative',
                         display:'inline-block',
                         opacity:0,
                         fontSize:84,
                         top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                         left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                        }).animate({opacity:1,fontSize:20,top:0,left:0},1000);}
4

3 回答 3

0

一种更有效的方法是通过类名获取元素，而不是通过数字循环来获取 ID...

HTML：

<span id="txt1" class="txt-el"></span>
<span id="txt2" class="txt-el"></span>
<span id="txt3" class="txt-el"></span>

Javascript

function animetxt() {
    $('span.txt-el').each(function(index, element) {
        /*
            index: the index of the current item in the results given by $('span.txt-el')
            element: the DOM element
        */

        $o = $(element); // you can use $(this) too

        // magic stuff here
    });
}
于 2012-12-17T14:26:34.760 回答
0

我将创建一个包含所有 Id 的数组并使用$.each：

$.each(['txt1', 'txt2' ], function(index, value) { 
  animetxt(value);  
});

（请注意，您可以输入 ID 或使用任何选择器）

function animetxt(id){
$o=$("#" + id);
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('display','inline-block');
$('span',$o).stop().css({position:'relative',
                         display:'inline-block',
                         opacity:0,
                         fontSize:84,
                         top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                         left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                        }).animate({opacity:1,fontSize:20,top:0,left:0},1000);}

注意：您还可以使用 for 循环并将索引连接到 id

编辑：按顺序调用函数

正如@FAngel 指出的那样，上面的代码一次执行。对于顺序执行，请使用以下函数。

这个新函数使用complete回调animation并调用自身。当找不到下一个 id 时它会停止。

你这样开始：

 $(function() {
      animetxt(1);
    });

这是功能：

function animetxt(id) {
    $o = $('#txt' + id);
    if (!$o.length) return;

    $o.html($o.text().replace(/([\S])/g, '<span>$1</span>'));
    $o.css('display', 'inline-block');
    $('span', $o).stop().css({
        position: 'relative',
        display: 'inline-block',
        opacity: 0,
        fontSize: 84,
        top: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        },
        left: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        }
    }).animate({
        opacity: 1,
        fontSize: 20,
        top: 0,
        left: 0
    }, {
        complete: function() {
            id++;
            animetxt(id);
        }
    }, 1000);
}​

尝试一下：

http://jsfiddle.net/ureyes84/ndScp/

于 2012-12-17T14:28:03.150 回答
0 
function animetxt($el){    
    if(!$el)
        $o=$("#txt1");
    else {
        $o = $el.next();
        if($o.length == 0)
           return; //stop if no more items
    }
    $o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
    $o.css('display','inline-block');
    $('span',$o).stop().css({position:'relative',
                            display:'inline-block',
                            opacity:0,
                            fontSize:84,
                            top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                            left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                            }).animate({opacity:1,fontSize:20,top:0,left:0},1000, function(el) { animetxt($(this)); });

你可以做类似上面的事情。function(el) { animetxt($(this)); }是一个完整的处理程序jQuery.animate。它在动画完成时调用。比你只需要找到下一个应该动画的元素。在我的示例中，我.next()假设txt1,txt2等txt3是兄弟姐妹。如果所有元素都动画，则停止动画。您可能需要找到其他方法来获取下一个元素 - 这取决于 HTML 的结构。

于 2012-12-17T14:46:16.007 回答