jquery - jQuery animate()，展开一个 div

Question

HTML：

<div id="box0"><img src="http://s14.postimg.org/9x1nrefy5/A_Sunday_on_La_Grande_Jatte.png" id="pic0"></div>
<div id="box1"><img src="http://s14.postimg.org/hbqzjs1tp/starry_night.png" id="pic1"></div>
<div id="box2"><img src=http://s14.postimg.org/x7ftn2se5/mona_lisa.png" id="pic2"></div>
<div id="box3"><img src="http://s14.postimg.org/k4k73t265/the_scream.png" id="pic3"></div>  

CSS：

        * {
            padding: 0px;
            margin: 0px;
            z-index: 0;
        }
        img {
            position: relative;
        }
        div {
            position: absolute;
            overflow: hidden;
            border: 8px solid #61260D;
        }
        #box0 {     /* A Sunday on La Grande Jatte */
            height: 150px;
            width: 120px;
            top: 300px;
            left: 100px;
        }
        #pic0 {
            left: -15px;
            top: -15px;
            height: 337px;
            width: 500px;
        }
        #box1 {     /* Starry Night */
            height: 100px;
            width: 400px;
            top: 150px;
            left: 100px;
        }
        #pic1 {
            left: -35px;
            top: -20px;
            height: 300px;
            width: 480px;
        }
        #box2 {     /* Mona Lisa */
            height: 150px;
            width: 100px;
            top: 190px;
            left: 50px;
        }
        #pic2 {
            left: -20px;
            top: -20px;
            height: 300px;
            width: 198px;
        }
        #box3 {     /* The Scream */
            height: 200px;
            width: 160px;
            top: 60px;
            left: 200px;
        }
        #pic3 {
            left: -30px;
            top: -20px;
            height: 400px;
            width: 314px;
        }

Javascript：

        var h = [];
        var w = [];
        var left = [];
        var top = [];
        var speed = 300;

        for (var i = 0; i < 4; i ++) {
            h[i] = $('#box'+i).css('height');
            w[i] = $('#box'+i).css('width');
            left[i] = $('#pic'+i).css('left');
            top[i] = $('#pic'+i).css('top');

        }
        for (var i = 0; i < 4; i ++) {
            $('div').hover(
                function() {
                    $(this).stop().css({'zIndex':'5'}).animate({
                        height : $(this).children().css('height'),
                        width : $(this).children().css('width')
                    }, speed);
                    $(this).children().animate({
                        left : '0',
                        top : '0'
                    }, speed);
                },
                function() {
                    $(this).stop().css({'zIndex':'0'}).animate({
                        height : h[i],
                        width : w[i]
                    }, speed);
                    $(this).children().animate({
                        left : left[i],
                        top : top[i]
                    }, speed);
                }
            );
        }

我想要做的是当光标进入一个 div 时，div 将扩展为图像大小，嵌入的图像将使用 animate() 更改其位置。
它确实可以很好地扩展，但是，当光标离开时，div 不会恢复其原始大小。

这是演示

Answer 1

为你做了一个工作小提琴：http: //jsfiddle.net/U4nRq/1/

编辑： 要修复它，使返回大小保持不变：

    var speed = 300;

    for (var i = 0; i < 4; i ++) {
        $("#box" + i).attr("stored_h",  $("#box" + i).css('height'));
        $("#box" + i).attr("stored_w",  $("#box" + i).css('width'));
        $("#box" + i).attr("stored_left",  $("#box" + i).children().css('left'));
        $("#box" + i).attr("stor_top",  $("#box" + i).children().css('top'));
    }

$('div').hover(
    function() {
        $(this).stop().css({'zIndex':'5'}).animate({
            height : $(this).children().css('height'),
            width : $(this).children().css('width')
        }, speed);
        $(this).children().animate({
            left : '0',
            top : '0'
        }, speed);
    },
    function() {
        $(this).stop().css({'zIndex':'0'}).animate({
            height : $(this).attr("stored_h"),
            width : $(this).attr("stored_w")
        }, speed);
        $(this).children().animate({
            left : $(this).attr("stored_left"),
            top : $(this).attr("stored_top")
        }, speed);
    }
);

小提琴：http: //jsfiddle.net/U4nRq/9/

Answer 2

你可以试试这个

$('div').hover(
    function() {
        $(this).attr('data-width', $(this).width());
        $(this).attr('data-height', $(this).height());
        $(this).stop().css({'zIndex':'5'}).animate({
            height : $(this).children().css('height'),
            width : $(this).children().css('width')
        }, speed);
        $(this).children().animate({
            left : '0',
            top : '0'
        }, speed);
    },
    function() {
        var w = $(this).attr('data-width');
        var h = $(this).attr('data-height')
        $(this).stop().css({'zIndex':'0'}).animate({
            height : h,
            width : w
        }, speed);
        $(this).children().animate({
            left : left[i],
            top : top[i]
        }, speed);
    }
);

演示。