javascript - JS改变高度并返回原始CSS高度

Question

希望在我遇到的一些 javascript 问题上得到一些帮助。

Q1:JS返回图片高度和边距

我的布局是水平滚动放置在网格中的较小图像，使用不同的高度百分比和边距来定位。当您单击任何图像时，它们都会扩展到高度:100% 和边距:0，这会清除所有以前的样式，将其放入简单的大图像布局中。

我的问题是如何添加一个函数，当点击 .image-container 时高度和边距返回到它最初在 css 中设置的方式

JS FIDDLE DEMO (单击任何中心图像)

// GALLERY 100% height
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '100%'},900) 
        .animate({'margin': '0'},900); 

    });

    // ? REMOVE HEIGHT ? 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '?'},900)
        .animate({'margin': '?'},900); 

    });

编辑更新的问题:第 2 季度如何使页面大小随图像变大

现在我的 .image-container 设置为较大的宽度，但是对于响应式图像很难找到正确的宽度，有没有办法找到这个宽度并使其随着图像的点击增长而增长(显示以上)

.image-container {
display:block;
width:3600px;
height: 75%;
float:left;

position:absolute;
top: 13%;
left: 120px;

z-index: -1;

感谢您的帮助!

Answer 1

您需要将原始高度存储在一个变量中。

查看 updated fiddle

var originalheight;
        // GALLERY 100% height
        $('.image-container').click(function(){
            originalheight = $('.image-container img').height();
            $('.image-container img').animate({'height': '100%'},900) 
            .animate({'margin': '0'},900); 

        });

        //REMOVE HEIGHT ?
        $('.image-container').click(function(){
            $('.image-container img').animate({'height': originalheight},900)
            .animate({'margin': '0'},900); 

        });

编辑:

对于之前解决方案中的错误感到抱歉。我没有注意到我不必要地使用了两次 click。这是 updated fiddle 的更新解决方案.

       var originalheight;
       $('.image-container').click(function () {
           if (!originalheight) originalheight = $('.image-container img').height();
           if ($('.image-container img').css('height') == originalheight + "px") { // GALLERY 100% height
               $('.image-container img').animate({
                   'height': '100%'
               }, 900).animate({
                   'margin': '0'
               }, 900);
           } else { //REMOVE HEIGHT ?
               $('.image-container img').animate({
                   'height': originalheight
               }, 900).animate({
                   'margin': '0'
               }, 900);
           }
       });