1

每次单击时，它似乎都会不断添加新的 newHeight 和 newDistance，我正在尝试使用顶部的全局变量保存原始高度并使用数据来执行此操作，但我得到了奇怪的结果，基本上我应该能够重置newDistance 和 newHeight 按照之前的第一个原始值通过单击运行该批次，但它没有，并且每次单击破坏我的布局时我都会获得新的附加值：

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

任何人？

4

2 回答 2

1

如何使用容器元素的数据集合而不是全局变量，即在顶部记录高度

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

然后使用

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

即重置高度

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

我对全局变量的工作方式有点怀疑。也许值得一试

于 2012-02-03T15:41:39.643 回答
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% 的工作......希望这会有所帮助！:)

于 2012-02-03T18:02:42.940 回答