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%;的形象。