javascript - jquery animate 不工作，div 不移动

Question

我试图让一个 div 在随机移动时逐渐出现和消失，但它不起作用，它不移动，是固定的。这是我有问题的代码的示例。 div 只会消失和出现。请帮助。

CSS

div.a {
    width: 50px;
    height:50px;
    background-color:red;
    position:fixed;    
}

JavaScript

 var opacidad = [0.0, 1.0];
 var visibilidad = ['hidden', 'visible'];
 $(document).ready(function () {
     animateDiv();
 });
 function makeNewPosition() {
     var h = $(window).height() - 50;
     var w = $(window).width() - 50;
     var nh = Math.floor(Math.random() * h);
     var nw = Math.floor(Math.random() * w);
     return [nh, nw];
 }
 function animateDiv() {
     var newq = makeNewPosition();
     var oldq = $('.a').offset();
     var speed = calcSpeed([oldq.top, oldq.left], newq);
     movimiento(newq, speed);
 };
 function movimiento(newq, speed) {
     //alert(newq)
     var newq = Math.floor(parseFloat(newq) / 2);
     //alert(newq)
     $('.a').animate({
         top: newq[0],
         left: newq[1],
         opacity: opacidad[0]
     }, speed).css({
         visibility: visibilidad[0]
     })
     var newq = Math.floor(parseFloat(newq) * 2);
     //alert(newq)
     $('.a').animate({
         top: newq[0],
         left: newq[1],
         opacity: opacidad[1]
     }, speed)
         .css({
         visibility: visibilidad[1]
     }, function () {
         animateDiv()
     })
 }
 function calcSpeed(prev, next) {
     var x = Math.abs(prev[1] - next[1]);
     var y = Math.abs(prev[0] - next[0]);
     var greatest = x > y ? x : y;
     var speedModifier = 0.1;
     var speed = Math.ceil(greatest / speedModifier);
     return speed;
 }

Answer 1

好的，我不确定这是否正是您要找的，但这里有一个基于您的代码的 jsFiddle，它随机地为 div 的位置和不透明度设置动画。我根据上面的评论进行了更正。

更新:我已根据您在下方的评论更新了 Fiddle。

我做了什么:

1. 在 movimiento 函数中，我们首先必须计算当前位置，以便...
2. ...我们可以用它来计算到新坐标的中间位置
3. 在中间点添加一个额外的动画，以便我们可以从不透明度 0 到 1 设置动画。
4. 将缓动设置为线性，以便两个半动画的速度相同。如果要为整个动画应用缓动值，则要复杂得多。

更新 2:抱歉，我在计算中间点时犯了一个错误。已修复。

http://jsfiddle.net/tonicboy/Y69QK/6/

animateDiv();

function makeNewPosition() {
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];
}

function animateDiv() {
    var newq = makeNewPosition();
    var oldq = $('.a').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    movimiento(newq, speed);
};

function movimiento(newq, speed) {
    var currq = [
        $('.a').offset().top,
        $('.a').offset().left
    ],
    halfq  = [
        Math.floor(currq[0] + (newq[0]-currq[0])/2),
        Math.floor(currq[1] + (newq[1]-currq[1])/2)
    ];

    console.log("Animate from " +  + currq[0] + "," + currq[1] + " to: " + newq[0] + "," + newq[1] + " via: " + halfq[0] + "," + halfq[1] + " - speed: " + speed);    
    $('.a').animate({
        top: halfq[0],
        left: halfq[1],
        opacity: 1
    }, {
        easing: 'linear',
        duration: speed
    });

    $('.a').animate({
        top: newq[0],
        left: newq[1],
        opacity: 0
    }, {
        easing: 'linear',
        duration: speed,
        complete: animateDiv
    });
}

function calcSpeed(prev, next) {
    var x = Math.abs(prev[1] - next[1]),
        y = Math.abs(prev[0] - next[0]),
        greatest = x > y ? x : y,
        speedModifier = 0.1,
        speed = Math.ceil(greatest / speedModifier);

    return speed;
}