0

私はこの問題を解決しようとしています。あらゆる種類の方法を試しましたが、論理的には機能するはずですが、機能しません。私はコーディングが得意ではないので、どんな助けも素晴らしいでしょう。

だから私は左側から右側の終わりまでオブジェクトをアニメーション化しようとしています。また、画面サイズによって配置が異なります。

これは私が持っているものです。私はユーザーのブラウザのサイズを検出していますが、新しいサイズ変更が検出されるたびに 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);
    }
}
4

1 に答える 1

0

古き良きメディア クエリと混合した 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;
    }
}

動作するはずですが、テストしていません。

于 2013-04-04T15:34:20.450 に答える