1

我正在创建一个网站，在加载时执行一系列 j-query 动画事件。当浏览器的屏幕分辨率发生变化（从宽屏到普通或从普通到平板等）时，是否可以更改加载时发生的 jquery 动画的参数？比如当屏幕分辨率降低时，让jquery动画向左移动1000px，而不是向左移动1320px？

加载时我的动画 Jquery 代码如下：

$(document).ready(function(){
$(window).load(function(){
$("#div1").delay(500).fadeIn(1000);                 
$("#div1").animate({bottom:"+=490px"});         
$("#div1").animate({left:"+=1320px"});          
$("#div1").fadeOut(1500);

当屏幕分辨率发生变化时，我已经使用媒体查询更改为 CSS 样式，现在我只需要能够更改 j-query 动画。

4

1 回答 1

2

您正在描述检测浏览器窗口分辨率的更改，而不是屏幕分辨率。.resize()使用或 等效地做到这一点很容易.on('resize', ...)。

var animationParameters = {}; // an empty object

function setAnimationParametersForWindowWidth(width) {
    if (width < 1024) { // change to the width you care about
        animationParameters.fadeInTime = 500;
        // set all variables that depend on the window width
    } else {
        animationParameters.fadeInTime = 1000;
        // set all variables that depend on the window width
    }
}
function setAnimationParameters() {
    var width = $(window).width();
    setAnimationParametersForWindowWidth(width);
}

$(window).on('resize', setAnimationParameters);

function doTheAnimation() {
    $("#div1").delay(500).fadeIn(animationParameters.fadeInTime);
    // run more animations, using the variables in animationParameters
}

$(document).ready(function(){
    setAnimationParameters();
    doTheAnimation();
});

正如我所展示的，您应该更改.animate()调用以使用变量的值而不是硬编码的数字。这将允许动画根据浏览器窗口的大小而有所不同。添加与动画中变化的数字一样多的变量。

resize事件处理程序查看$(window).width()以确定当前窗口宽度。

于 2013-07-22T20:12:30.407 回答