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

Question

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

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

我的布局是在网格中定位的较小图像的水平滚动，使用不同的高度百分比和边距来定位。 当您单击任何图像时，它们都会扩展为 height:100% 和 margin: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); 

    });

编辑更新的问题：Q2 如何使页面大小随着更大的图像而增长

现在我的 .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);
           }
       });

Answer 2

这是我的想法，希望能奏效：

// Before animation
    var heights = new Array();
    var margins = new Array();
    $('.image-container img').each(function(){
       heights.push($(this).css('height'));
    });
    $('.image-container img').each(function(){
       margins.push($(this).css('margin'));
    });
// 
    $('.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': heights[$(this).index()]},900)
        .animate({'margin': margins[$(this).index()]},900); 

    });

Answer 3

首先，我建议您使用 focusout 和 blur 事件来撤消更改，因为您实现“点击”事件的方式，只会考虑第二部分（这样做会删除第一次点击实现）。最好的方法是在单击时放大图像，并在单击离开时重新设置它的大小。

试试这个：

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

或者更好的是，使用您定义单击和再次单击时的行为的类，例如：

<style>
.clickimage{ height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>

  $('.yourOriginalValues').click(function(){
    $(this).switchClass( "yourOriginalValues", "clickimage", 900 );
  });
  $('.clickimage).click(function(){
    $(this).switchClass( "clickimage", "yourOriginalValues", 900 );
  });      

ps。 switchClass 方法，是一个 jQuery UI 功能。