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不会恢复其原始大小。
Here is the demo

最佳答案

为您制作了一个工作提琴:
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/

关于jquery - jQuery animate(),展开div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17859001/

10-12 12:20
查看更多