0

これを尋ねる最善の方法は、コードを表示することだと思います。

var counter = 1;
$('#animation').click(function () {
    if (!$('h2').is(':animated')) {
        if (counter == 5) {
            toTheRight = !toTheRight;
            counter = 0;
        }
        var movement = (.2 * $('h2').width()) + "px";
        if (toTheRight) {
            $('h2').animate({
                "font-size": "2.2em",
                "width": "50%",
                "left": "+=" + movement
            }, { queue: false, duration: 1000 });
        }
        else {
            $('h2').animate({
                "font-size": "2.2em",
                "width": "50%",
                "left": "-=" + movement
            }, { queue: false, duration: 1000 });
        }
        counter++;
    }
});

この関数は、最初から最後まで同じサイズのウィンドウに対して非常にうまく機能します。要素の現在の位置を左に戻すだけでなく、ウィンドウのサイズ変更を処理するエレガントな方法があるかどうか疑問に思っていました。

注: 全画面表示モードで要素が右いっぱいにある場合、要素の位置を調整せずに画面を縮小すると、要素が画面の右にスクロールされます。

アドバイスありがとうございます。

4

1 に答える 1

0

それを理解し、いくつかのことを書き直しました

$('#animation').click(function () {
    if (!$('h2').is(':animated')) {
        var myColors = ["orange", "green", "cyan", "magenta", "red"];
        var myMessages = ["Of the people", "By the people", "For the people", "EAGLE!"];
        $('h2').css("background-color", myColors[counter % 5]);
        if (counter == 5) {
            toTheRight = !toTheRight;
            counter = 0;
            $('#mutate').each(function (index, element) {
                if (element.firstChild.data == myMessages[0]) {
                    element.firstChild.data = myMessages[1];
                }
                else if (element.firstChild.data == myMessages[1]) {
                    element.firstChild.data = myMessages[2];
                }
                else if (element.firstChild.data == myMessages[2]) {
                    element.firstChild.data = myMessages[3];
                }
                else {
                    element.firstChild.data = myMessages[0];
                }
            });
        }
        var movement = (.1 * $('#crazy').width()) + "px";
        if (toTheRight) {
            $('h2').animate({
                "font-size": "2.2em",
                "width": "50%",
                "left": "+=" + movement
            }, { queue: false, duration: 1000 });
        }
        else {
            $('h2').animate({
                "font-size": "2.2em",
                "width": "50%",
                "left": "-=" + movement
            }, { queue: false, duration: 1000 });
        }
        counter++;
    }
});


$(window).resize(function () {
    if (!$('h2').is(':animated')) {
        var tempCounter;
        if (toTheRight) {
            tempCounter = counter;
        }
        else {
            tempCounter = 5 - counter;
        }
        var positionPercent = tempCounter * .1;
        var leftPosition = positionPercent * ($('#crazy').width()) + "px"
        $('h2').css("left", leftPosition);

    }
});

ウィンドウが非常に大きいものから非常に小さいものに変わるとき、わずかなブリップだけで比較的うまく機能します。

于 2013-06-07T19:52:42.963 に答える