setInterval + jQuery CSS动画窗口大小

Question

我试图解决这个问题，我已经尝试了各种方法，虽然在逻辑上它应该工作，它只是没有。任何帮助将是伟大的，因为我不是很擅长编码。

我想让一个对象从左边移动到右边的末端。根据屏幕尺寸的不同，定位也不同。

这是到目前为止我得到的。我正在检测用户的浏览器大小，但我也想销毁setinterval每当有一个新的大小调整检测。

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过渡与良好的老式媒体查询混合如何?

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

应该可以工作，但还没有测试。