JQuery Анимация непрозрачности В затем выключено во время анимации позиции

Question

Имея некоторые проблемы, исчезающие, а затем исчезающие во время анимации позиции, все в пределах одной продолжительности. Я бы предпочел использовать непрозрачность, но работает fadeIn/fadeOut. Благодарю. Херес 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); 
} 

Fiddle:http://jsfiddle.net/2vT6M/6/

EDIT: Вымытый код немного.