jQuery 动画和窗口大小调整答案

【问题标题】：jQuery Animation and window resizingjQuery 动画和窗口大小调整
【发布时间】：2013-06-07 18:43:01
【问题描述】：

我认为最好的方法是只显示代码：

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

此功能非常适用于从头到尾保持相同大小的窗口。我想知道是否有一种优雅的方式来处理窗口调整大小，而不仅仅是将元素的当前位置一直重置到左侧。

注意：如果在全屏模式下并且元素一直向右，缩小屏幕而不调整元素位置会导致元素滚动到屏幕右侧。

感谢您提供的任何建议。

【问题讨论】：

标签： jquery animation resize window

【解决方案1】：

想通了，最后重写了一些东西

$('#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);

    }
});

当窗口从大到小时，效果相对较好，只有一个小亮点。

【讨论】：