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

这是一个可以调整的具有常量变量的连续间隔的示例。

$(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/

编辑：稍微清理了一下代码。

Answer 2

要同时执行多个动画，您必须拨打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

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

2 个答案: