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/

編輯：清理代碼位。