如何重置为原始值? [英] How to reset to original values?

问题描述

每次我单击时，它似乎一直在添加新的newHeight和newDistance，我试图使用顶部的全局变量保存原始高度，并使用数据来做到这一点，但是我得到了奇怪的结果，基本上我应该能够按照之前将newDistance和newHeight重置为第一个原始值，以通过单击来运行很多操作，但没有这样做，并且每次单击断开布局后，我都会获得新的附加值:

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

有人吗?

推荐答案

因此，基于大约20分钟前我可以从您的测试站点下载的代码，我设法使其与以下代码一起使用:

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

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

几点值得深思的地方:

• 我简化了多个if语句，使其更易于理解和处理
• 如果您连续多次单击FILTER，我会使用hide()来避免出现混乱的动画问题
• 我只调整了盒子的top坐标即可实现这一目标
• 我希望将这些框放在更通用的容器中，以便于动画和管理，但我知道wordpress并不能始终为您提供最大的工作空间，因此，您可以自行使用！

• 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!

这可能并不完全是您在动画中寻找的东西，但这是您所拥有的代码的有效示例，应该可以让您90％地受益……希望这会有所帮助！ :)

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! :)

这篇关于如何重置为原始值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！