Question

I have some code, that simulate google images effect.
How can I animate nested divs in div class="productBox", not only this div???
I want to change height of “imageProduct” class during animation also.

Here this code on jsFiddle: http://jsfiddle.net/S2svG/57/

Here is html:

<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>

And js:

$(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"
});                       
}); 

Thanks in advance!!!

Answer 1

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