jQuery的動畫標題上滾動

Question

我在尋找一種方法，使一個頭動畫like this one.

我發現在this post一個解決方案，但它不處理圖像。我改變了這樣的代碼：

<div id="header_nav"><img src="http://placehold.it/90x90" /></div> 

http://jsfiddle.net/JJ8Jc/72/

我能做些什麼？謝謝您的幫助。

問題：如何在標題中使用其div縮放圖像？

任何幫助，將不勝感激！

Answer 1

當頭部縮小時縮小圖像？

Fiddle.

$(function(){ 
    $('#header_nav').data('size','big'); 
}); 

$(window).scroll(function(){ 
    if($(document).scrollTop() > 0) 
    { 
     if($('#header_nav').data('size') == 'big') 
     { 
      $('#header_nav').data('size','small'); 
      $('#header_nav').stop().animate({ 
       height:'40px' 
      },600); 
      $('#header_nav img').stop().animate({ 
       height:'40px' /*image has the same effect like the header*/ 
      },600); 
     } 
    } 
    else 
    { 
     if($('#header_nav').data('size') == 'small') 
     { 
      $('#header_nav').data('size','big'); 
      $('#header_nav').stop().animate({ 
       height:'100px' 
      },600); 
      $('#header_nav img').stop().animate({ 
       height:'100px' /*image has the same effect like the header*/ 
      },600); 
     } 
    } 
}); 

Answer 2

將overflow: hidden添加到#header_nav並且圖片將被剪裁元素的高度：Working demo。

或者，將max-height: 100%; max-width: 100%添加到圖像中，使其隨元素的高度收縮：Working demo。

Answer 3

我要裁剪的圖像添加overflow: hidden到圖像（#header_nav）的父母，如果你想使圖像與頭縮添加max-height: 100%;的形象。