JQuery动画:从左到右以不同于从上到下的速度制作DIV动画

JQuery Animation: Animate DIV left to right at different speed than top to bottom

本文关键字：动画 速度 DIV 不同于 从左到右 JQuery 从上到下      更新时间：2023-09-26

尝试以一定的速度从左到右（和向后）对1个div进行动画制作，并以不同的速度从上到下（和后面）对其进行动画制作（本质上是创建类似窗口的屏幕保护程序效果）。

问题是，每个动画都是一个接一个地出现的（很明显），但我一直在尝试组合，这样图像就会按对角线设置动画。

来自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();
};

你试过这个吗：

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