ネストされたdivをアニメーション化する方法 - jquery？

Question

私はいくつかのコードを持って、それはGoogleの画像の効果をシミュレートします。 div class="productBox"のネストされたdivをアニメーション化するにはどうすればいいですか？ アニメーション中に「imageProduct」クラスの高さも変更したいです。ここで

jsFiddleでこのコード：

<div class="productBox"> 
    <div class="productImage"><a href="#"><img src="http://some_image.jpg"></a></div> 
    <div class="productTitle">Product title</div> 
    <div class="productDescription">Here is description of the product.</div> 
    <div class="buyButton"><a href="#">Buy this!</a></div> 
</div> 

とJS：http://jsfiddle.net/S2svG/57/ここ

はhtmlです事前に

$(function(){ 
$.fn.popOut=function(user_opts){    
    return this.each(function(){ 

     var opts=$.extend({ 
      useId:"poppedOut", 
      padding:20, 
      border:0, 
      speed:200 
     },user_opts); 

     $(this).mouseover(function(){ 
      // kill any instance of this already 
      $("#"+opts.useId).remove(); 

      // make a copy of the hovered guy 
      var $div=$(this).clone(); 

      // setup for prelim stuff 
      $div.css({ 
       "position":"absolute", 
       "border":opts.border, 
       "top":$(this).offset().top, 
       "left":$(this).offset().left, 
       "-moz-box-shadow":"0px 0px 12px black", 
       "-webkit-box-shadow":"0px 0px 12px black", 
       "z-index":"99" 
      }); 

      // store all of the old props so it can be animate back 
      $div.attr("id",opts.useId) 
       .attr("oldWidth",$(this).width()) 
       .attr("oldHeight",$(this).height()) 
       .attr("oldTop",$(this).offset().top) 
       .attr("oldLeft",$(this).offset().left) 
       .attr("oldPadding",$(this).css("padding")); 

      // put this guy on the page 
      $("body").prepend($div); 

      // animate the div outward 
      $div.animate({ 
       "top":$(this).offset().top-Math.abs($(this).height()-opts.height), 
       "left":$(this).offset().left-opts.padding, 
       "height":opts.height, 
       "padding":opts.padding 
      },opts.speed); 

      // loop through each selector and animate it to its css object 
      for(var eachSelector in opts.selectors){ 
       var selectorObject=opts.selectors[eachSelector]; 
       for(var jquerySelector in selectorObject){ 
        var cssObject=selectorObject[jquerySelector]; 
        $div.find(jquerySelector).animate(cssObject,opts.speed); 
       } 
      } 

      $div.mouseleave(function(){ 
       $("#"+opts.useId).animate({ 
        width:$(this).attr("oldWidth"), 
        height:$(this).attr("oldHeight"), 
        top:$(this).attr("oldTop"), 
        left:$(this).attr("oldLeft"), 
        padding:$(this).attr("oldPadding") 
       },0,function(){ 
        $(this).remove(); 
       }); 
      }); 
     }); 
    }); 
}; 
$(".productBox").popOut({ 
    height:300, 
    border:"1px solid #333" 
});      
}); 

感謝！

Answer 1

$(this).find(".productImage").animate({...});