JQuery在关闭动画时的位置然后关闭动画不透明度

Question

在动画位置中渐渐消失，然后消失，所有时间都在同一时间内。我宁愿使用不透明，但淡入/淡出功能。谢谢。继承人JSFiddle

$(document).ready(function() { 
    runIt(); 
}); 

function runIt() { 
    $('#ball').css({ 
     opacity: '0' 
    }).animate({ 
     opacity: '1', 
     left: '355' 
    }, 2000).animate({ 
     opacity: '0' 
    }, function() { 
     $('#ball').removeAttr('style'); 
     runIt(); 
    }); 
} 

JSFiddle

Answer 1

同时执行多个动画你必须调用dequeue()

function runIt() { 
    $('#ball').css({ 
     opacity : 0, 
     left : 0 
    }).animate({ 
     left: '355px' 
    }, 2000).animate({ 
     opacity: 1 
    },1000, function() { 
     $(this).animate({ 
      opacity: 0 
     },1000, runIt); 
    }).dequeue() 
} 

FIDDLE

Answer 2

这里的恒定变量连续区间的一个例子，你可以调整。

$(document).ready(function() { 
    runIt(); 
}); 

function runIt() { 
    var WIDTH = 350, 
     DURATION = 1000; 

    $('#ball') 
    .css({ opacity: '0', left: '0' }) 
    .animate({ opacity: '1', left: WIDTH/2 }, DURATION/2, 'linear') 
    .animate({ opacity: '0', left: WIDTH }, DURATION/2, 'linear', runIt); 
} 

小提琴：http://jsfiddle.net/2vT6M/6/

编辑：清理代码位。