Как восстановить исходные значения?

Question

Похоже, что он продолжает добавлять новые newHeight и newDistance каждый раз, когда я нажимаю, я пытаюсь сохранить исходную высоту с помощью глобальной переменной вверху и использую данные для этого, но я получаю странные результаты, в основном, я долженв состоянии сбросить newDistance и newHeight к первым исходным значениям, как раньше, для запуска лота одним кликом, но это не так, и я получаю новые добавленные значения каждый раз, когда нажимаю, ломая свой макет в результате:* Кто-нибудь? * * 1004

Answer 1

Итак, основываясь на коде, который я мог скачать около 20 минут назад с вашего тестового сайта, мне удалось заставить его работать со следующим кодом:

$(document).ready(function(){

    // placeholder to contain the original height...
    var original_height = 0;

    talents = $(".talenti");
    filter = $(".filtra");

    filter.click(function(e){
        e.preventDefault();

        if (filter.hasClass('opened')){

            filter.removeClass('opened');

            // toggle the wrapping, just with a zero top coordinate...
            $("#wrapNav").slideToggle("10", "linear", function(){
                $("#sliding-navigation").hide();
                $(".box").animate({top: '0px'});
            });

            // reset to the original height...
            $("#container").height(original_height);

        }
        else {

            // get the original height if it's not already set...
            if (original_height == 0)
                original_height = $("#container").height();

            filter.addClass('opened');
            if (talents.hasClass("opened"))
            {
                $(".nasco").hide();
                $("#wrapNav").slideToggle();
                talents.removeClass('opened');
            }

            // toggle the wrapping with a height of the nav as top coordinate...
            $("#wrapNav").slideToggle("10", "linear", function(){
                $("#sliding-navigation").slideToggle(true, function(){

                    // need the height of the nav before we know how far to move the boxes...
                    var newHeight = $("#wrapNav").outerHeight(true);
                    $(".box").animate({top: newHeight});

                    // set the container's new height, much like you had...
                    $("#container").height(original_height + newHeight);

                });
            });
        }
    });


    talents.click(function(e) {
        e.preventDefault();

        if (talents.hasClass('opened')) {

            talents.removeClass('opened');

            // toggle the wrapping, just with a zero top coordinate...
            $("#wrapNav").slideToggle("10", "linear", function(){
                $(".nasco").hide();
                $(".box").animate({top: '0px'});
            });

            // reset to the original height...
            $("#container").height(original_height);

        }
        else {

            // get the original height if it's not already set...
            if (original_height == 0)
                original_height = $("#container").height();

            talents.addClass('opened');         
            if (filter.hasClass("opened"))
            {
                $("#sliding-navigation").hide();
                $("#wrapNav").slideToggle();
                filter.removeClass('opened');
            }

            // toggle the wrapping with a height of the nav as top coordinate...
            $("#wrapNav").slideToggle("10", "linear", function(){

                // need the height of the nav before we know how far to move the boxes...
                $(".nasco").slideToggle(true, function(){

                    var newHeight = $("#wrapNav").outerHeight(true);
                    $(".box").animate({top: newHeight});

                    // set the container's new height, much like you had...
                    $("#container").height(original_height + newHeight);

                });
            });
        }
    });
});

Несколько пунктов, добавляющих пищу для размышлений:

• Я упростил несколько if операторов, чтобы их было легче понять и обработать
• Я использовал hide(), чтобы избежать проблем с анимацией, если вы нажали FILTER несколько раз подряд
• Я только скорректировал top координаты полей для достижения этого
• Я бы предпочел хранить коробки в более общем контейнере, что упрощает анимацию и управление, но я понимаю, что WordPress не всегда дает вам больше возможностей для работы, так что это должно помочь вам в этом!

Возможно, это не совсем то, что вы ищете в своей анимации, но это рабочий пример кода, который вы имели и должны получить 90% пути ... надеюсь, это поможет! :)

Answer 2

Как насчет использования сбора данных элемента контейнера, а не глобальной переменной, т.е. в верхней записи высота

$("#container").data('height', $("#container").height());

, а затем использовать

$("#container").data('height');

, то есть для сбросавысота

$("#container").css({height: $("#container").data('height') });

Я немного подозрительно отношусь к тому, как работает глобальная переменная.Стоит попробовать, может быть,