jquery - 窗口大小的 setInterval + jQuery CSS 动画

Question

我正在努力解决这个问题，我已经尝试了各种方法，虽然从逻辑上讲它应该有效，但它就是无效。任何帮助都会很棒，因为我不太擅长编码。

因此，我正在尝试为一个对象设置从左侧到右侧末端的动画。并且定位因屏幕尺寸而异。

到目前为止，这就是我所拥有的。我正在检测用户的浏览器大小，但我希望在检测到新的调整大小时也销毁 setIntervals。

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);
    }
}

Answer 1

将 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;
    }
}

应该可以，但尚未测试。