JS更改高度並返回到原始CSS高度

Question

希望能獲得一些JavaScript幫助，我陷入困境。

Q1：JS RETURN TO圖像高度和MARGIN

我的佈局是定位在網格較小的圖像，使用不同的高度的百分數和邊距位置的水平滾動。 當你點擊任何圖像時，它們都會展開到高度：100％和margin：0，這將清除以前的所有樣式，並將其放入簡單的大圖像佈局中。

我的問題是如何添加一個功能，圖像配上集裝箱單擊高度和利潤回報如何在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 HOW TO MAKE頁面尺寸較大的圖像

GROW

現在我的圖像配容器被設置爲一個較大的寬度，但與響應圖像很難找到正確的寬度，是有辦法至找到這個寬度，並使其成長伴隨着圖像的點擊增長（上面顯示）

.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

首先，我建議你使用事件的內容和模糊事件撤消更改，因爲這樣你實現你的「點擊'事件，第二部分只會被考慮（你擦除了第一次點擊的實施）。最好的辦法是單擊時放大圖像，並在點擊時重新調整大小。

試試這個：

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

或者更好，使用類，在其中定義behaiviors上點擊，並再次點擊，用於爲例：

<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功能。