设置间隔+；窗口大小上的jQuery CSS动画

我正试图解决这个问题，我尝试了各种方法，虽然从逻辑上讲它应该是可行的，但它就是不行。任何帮助都会很好，因为我不太擅长编码

所以我试着从左侧到右侧的末端制作一个对象的动画。而且，根据屏幕大小，定位也会有所不同

到目前为止，这就是我得到的。我正在检测用户的浏览器大小，但我也希望在出现新的调整大小检测时销毁设置间隔

showViewportSize();
var $box = $('#box');

$(window).resize(function (e) {
    window.clearInterval('animation');
    showViewportSize();
});

function showViewportSize() {
    var width = $(window).width();
    var height = $(window).height();

    if (width <= 1024) {
        var box = setInterval(function () {
            $box.animate({
                "left": "+1200"
            }, 40000, function () {
                $box.removeAttr("style");
            });
        }, 400);
    }

    if ((width <= 1440) && (width > 1025)) {
        var box = setInterval(function () {
            $box.animate({
                "left": "+1200"
            }, 40000, function () {
                $box.removeAttr("style");
            });
        }, 400);
    }

    if (width >= 2000) {
        var box = setInterval(function () {
            $box.animate({
                "left": "+1200"
            }, 40000, function () {
                $box.removeAttr("style");
            });
        }, 400);
    }
}

showViewportSize（）；
变量$box=$（“#box”）；
$（窗口）。调整大小（函数（e）{
clearInterval（“动画”）；
showViewportSize（）；
});
函数showViewportSize（）{
变量宽度=$（窗口）.width（）；
var height=$（window.height（）；
如果（宽度=2000）{
变量框=设置间隔（函数（）{
$box.animate({
“左”：“+1200”
}，40000，函数（）{
$box.removeAttr（“样式”）；
});
}, 400);
}
}

如何将CSS3转换与良好的“ol媒体查询”结合起来

#box {
    left: 0;

    -webkit-transition: left 0.4s ease-in-out;
    -moz-transition: left 0.4s ease-in-out;
    -o-transition: left 0.4s ease-in-out;
    transition: left 0.4s ease-in-out;
}

@media screen and (min-width : 1024px) {
    #box {
        left: 1200px;
    }
}

---

应该可以工作，但尚未测试。

您卡在哪个零件上？只是破坏了设定间隔？要做到这一点，只需像现在一样将

setInterval

返回的值存储在全局变量（而不是本地

var框

）中，并对其调用

clearInterval

。除了下面的CSS3解决方案之外，您的问题可能是每次调整大小的迭代都会调用showViewportSize（）函数。目前的行为是什么？