Question

尝试以一定的速度从左到右（和后面）动画制作1 DIV，并以不同的速度从上到下（和后面）动画制作动画（基本上创建类似Windows的屏幕保护程序效果）。

问题是每个动画都是在彼此之后发生的（很明显）但是我想要组合起来以便图像会对角线动画。

来自CSS动画，这很容易，但是由于它无法检测到响应窗口的宽度/高度，因此反弹边缘变得非常不稳定。

任何想法？非常感谢。

到目前为止

代码是：

$(document).ready(function() {

    updateWindowsize();
    $(window).resize(function() {
        updateWindowsize();
    });
    bounceBounce();

});

var imageWidth = '540'
    imageHeight = '705'

function updateWindowsize() {
    var $window = $(window);
    windowHeight = $window.height();
    windowWidth = $window.width();
}

function bounceBounce() {

    $('.div-1').animate({"left": windowWidth - imageWidth}, 3000, 'linear',
          function(){ $(this).animate({left: 0}, 3000, 'linear');
    });

    $('.div-1').animate({"top": windowHeight - imageHeight}, 6000, 'linear',
          function(){ $(this).animate({top: 0}, 6000, 'linear');
    });

    bounceBounce();

};

Answer 1

你试过这个：

$('.div-1').animate({"left": windowWidth - imageWidth, "top": windowHeight - imageHeight}, 6000, 'linear',
      function(){ $(this).animate({left: 0, top: 0}, 6000, 'linear');
});

JQuery动画：从上到下以不同的速度从左到右动画DIV

1 个答案: