Question

我正在创建一个网站，在加载时，执行一系列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动画。

Answer 1

您正在描述检测浏览器窗口分辨率的更改，而不是屏幕分辨率。使用.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()以确定当前窗口宽度。

可以在重新调整屏幕分辨率时更改Jquery事件吗？

1 个答案: