打开div时的最大高度

时间:2014-03-08 18:22:17

标签: javascript jquery html

如何制作最大高度?

animate( { height: '500px' } to animate( { height: '100%' }

200px 300px 400px 800px我有一些高度。

$(document).ready(function() {
    $("#updo").click(function(){
        $("#updo_folder").stop();
        $("#updo_folder").show();
        if($("#updo_folder").height() < 1){
            $("#updo_folder").animate( { height: '500px' }, 1000 , function(){$(this).show();});
        }else{
            $("#updo_folder").animate( { height: '0px' }, 1000, function(){$(this).hide();});
        }
    });

});
var jump=function(e)
{
       e.preventDefault();
       var target = $(this).attr("href");
       $('html,body').animate(
       {
           scrollTop: $(target).offset().top
       },500,function()
       {
               location.hash = target;
       });

}

$(document).ready(function()
{
       $('a[href*=#]').bind("click", jump);
       return false;
});

http://jsfiddle.net/prffrost/TFBeu/4/

1 个答案:

答案 0 :(得分:0)

您设置height: 100%,对其进行测量,然后再次设置height: 0px并设置为该高度的动画:

$(document).ready(function () {
    $("#updo").click(function () {
        // Use a variable rather than endlessly repeating the lookup
        var folder = $("#updo_folder");
        var targetHeight;
        folder.stop().show();
        if (folder.height() < 1) {
            // Set it to full height
            folder.css("height", "100%");
            // Measure it
            targetHeight = folder.height();
            // Set back to zero height, and animate to the measured height
            folder.css("height", "0px");
            folder.animate({
                height: targetHeight
            }, 1000, function () {
                $(this).show();
            });
        } else {
            folder.animate({
                height: '0px'
            }, 1000, function () {
                $(this).hide();
            });
        }
    });

});

Updated Fiddle