How to reset to original values?

问题

It looks like it keeps adding a new newHeight and a newDistance each time i click, I am trying to save original height with a global var at the top and using data to do that but i get weird results, basically i should be able to reset newDistance and newHeight to first original values as per before to run the lot with a click but it doesn't and i get new added values each time i click breaking my layout as a result:

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

genHeight = $("#container").data($("#container").height());

filter.click(function(e) {
    e.preventDefault();
    if (talents.hasClass("opened")) {
        $(".nasco").slideToggle();
        $("#wrapNav").slideToggle("10", "linear");
        talents.removeClass('opened');
        filter.addClass('opened');
        $("#container").css("height", genHeight);
    } else  {
        filter.addClass('opened');
    };
    if (filter.hasClass("opened")) {
        $("#wrapNav").slideToggle("10", "linear", function(){
            $("#sliding-navigation").slideToggle();
            var newHeight = $("#container").height() + $("#wrapNav").outerHeight(true);
            var newDistance = newHeight - $("#container").height() + 22;
            $("#container").animate({height: newHeight}, 50,function(){ 
                $(".box").animate({top: newDistance}); 
            });
        });
    } 
});

talents.click(function(e) {
    e.preventDefault();
    if (filter.hasClass("opened")) {
        $("#sliding-navigation").slideToggle();
        $("#wrapNav").slideToggle("10", "linear");
        filter.removeClass('opened');
        talents.addClass('opened');
        $("#container").css("height", genHeight);
    } else  {
        talens.addClass('opened');
    };  
    if (talents.hasClass("opened")) {
        $("#wrapNav").slideToggle("10", "linear", function(){
            $(".nasco").slideToggle();
            var newHeight = $("#container").height() + $("#wrapNav").outerHeight(true);
            var newDistance = newHeight - $("#container").height() + 156;
            $("#container").animate({height: newHeight}, 50,function(){ 
                $(".box").animate({top: newDistance}); 
            });
        });
    } 
});

Anyone?

回答1:

So, based on the code I could download about 20min ago from your test site, I managed to get it working with the following code:

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

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

A few points adding food for thought:

• I simplified the multiple if statements to make it easier to understand and process
• I used hide() to avoid messy animation problems if you clicked on FILTER multiple times in a row
• I only adjusted the top coordinates of the boxes to achieve this
• I would have preferred to contain the boxes in a more general container, allowing for easier animation and management, but I understand that wordpress doesn't always give you the most room to work, so this should get you on your way!

It might not be completely what you're looking for in your animation, but it's a working example of the code you had and should get you 90% of the way...hope this helps! :)

回答2:

What about using the data collection of the container element rather than a global variable i.e. at the top record the height

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

then to use

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

i.e. to reset the height

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

I feel a bit suspicious about how the global variable is working. Worth a try maybe

来源：https://stackoverflow.com/questions/9131155/how-to-reset-to-original-values