jquery - 用 jQuery 动画单词

Question

我不知道我在用 jQuery 做什么。我正在尝试一个接一个地为单词设置动画。

例如：

左侧的单词（看不见）会在滑入时淡入，而另一个单词会从右侧淡入。然后两个词都会淡出，一组新的词也会这样做。到目前为止，这是我遇到的热点问题：

$(function() {
    $('.fadel').animate({
        left: '250px'
    }, 3575, function() {
        $(this).fadeOut();
    });

    $('.fader').animate({
        right: '250px'
    }, 3575, function() {
        $(this).fadeIn();
        $(this).fadeOut();
    });

});

任何帮助将不胜感激。先感谢您！

Answer 1

http://jsfiddle.net/xPXqV/1/

$(function()
{
  var num = 0;
  var words =
  [
    {left: "foo", right: "bar"},
    {left: "holy", right: "crap"},
    {left: "train", right: "spotting"}
  ];    

  var fadel = $('#fadeL');
  var fader = $('#fadeR');

  animate();

  function animate()
  {
    var leftword = words[num].left;
    var rightword = words[num].right;

    fadel
        .stop()
        .css('left', '0px')
        .css('opacity', 0)
        .text(leftword).show();

    fader
        .stop()
        .css('left', '500px')
        .css('opacity', 0)
        .text(rightword).show();
    fadel.animate({
        opacity: 1,
        left: (250 - fadel.width()) + 'px'
    }, 3575, function() {
        fadel.fadeOut("slow", function()
        {
            queueNext();
        });
    });

    fader.animate({
        opacity: 1,
        left: '250px'
    }, 3575, function() {  
        fader.fadeOut("slow");
    });
}

function queueNext()
{
    if (++num == words.length)
        num = 0;

    animate();
}

});