0

jQueryで何をしているのかわかりません。単語を次々にアニメーション化しようとしています。

例えば：

左側の (目に見えない) 単語はスライド インしながらフェード インし、もう一方の単語は右側からフェード スライド インします。次に、両方の単語がフェードアウトし、新しい単語セットが同じことを行います。これが私がこれまでに持っているホットな混乱です：

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

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

});

どんな助けでも大歓迎です。前もって感謝します！

4

1 に答える 1

0

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();
}

});

于 2013-03-28T23:47:18.693 に答える