jQuery animate（），展开一个div

HTML:

Javascript:

        * {
            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;
        }

var h=[]；
var w=[]；
左向量=[]；
var-top=[]；
无功转速=300；
对于（变量i=0；i<4；i++）{
h[i]=$（'#box'+i）.css（'height'）；
w[i]=$（'#box'+i）.css（'width'）；
左[i]=$（'#pic'+i）.css（'left'）；
top[i]=$（'#pic'+i）.css（'top'）；
}
对于（变量i=0；i<4；i++）{
$（'div'）。悬停(
函数（）{
$（this.stop（）.css（{'zIndex'：'5'}）.animate({
高度：$（this.children（）.css（'height'），
宽度：$（this.children（）.css（'width'））
}，速度）；
$（this）.children（）.animate({
左：“0”，
顶部：“0”
}，速度）；
},
函数（）{
$（this.stop（）.css（{'zIndex'：'0'））.animate({
高度：h[i]，
宽度：w[i]
}，速度）；
$（this）.children（）.animate({
左：左[i]，
top:top[i]
}，速度）；
}
);
}

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

---

为您制作了一把小提琴：

编辑： 要修正它，使返回大小保持不变，请执行以下操作：

        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);
                }
            );
        }

var速度=300；
对于（变量i=0；i<4；i++）{
$（“#box”+i）.attr（“存储的”、$（“#box”+i）.css（'height'））；
$（“#box”+i）.attr（“存储的”、$（“#box”+i）.css（'width'））；
$（“#box”+i）.attr（“存储的#u左”，“$（“#box”+i）.children（）.css（'left'））；
$（“#box”+i）.attr（“stor#u top”，$（“#box”+i）.children（）.css（'top'）；
}
$（'div'）。悬停(
函数（）{
$（this.stop（）.css（{'zIndex'：'5'}）.animate({
高度：$（this.children（）.css（'height'），
宽度：$（this.children（）.css（'width'））
}，速度）；
$（this）.children（）.animate({
左：“0”，
顶部：“0”
}，速度）；
},
函数（）{
$（this.stop（）.css（{'zIndex'：'0'））.animate({
高度：$（this）.attr（“存储的高度”），
宽度：$（this.attr（“存储的”）
}，速度）；
$（this）.children（）.animate({
左：$（this）.attr（“存储的左”），
top:$（this.attr（“存储的\u top”）
}，速度）；
}
);

---

小提琴：

为您制作了一把工作小提琴：

编辑： 要修正它，使返回大小保持不变，请执行以下操作：

        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);
                }
            );
        }

var速度=300；
对于（变量i=0；i<4；i++）{
$（“#box”+i）.attr（“存储的”、$（“#box”+i）.css（'height'））；
$（“#box”+i）.attr（“存储的”、$（“#box”+i）.css（'width'））；
$（“#box”+i）.attr（“存储的#u左”，“$（“#box”+i）.children（）.css（'left'））；
$（“#box”+i）.attr（“stor#u top”，$（“#box”+i）.children（）.css（'top'）；
}
$（'div'）。悬停(
函数（）{
$（this.stop（）.css（{'zIndex'：'5'}）.animate({
高度：$（this.children（）.css（'height'），
宽度：$（this.children（）.css（'width'））
}，速度）；
$（this）.children（）.animate({
左：“0”，
顶部：“0”
}，速度）；
},
函数（）{
$（this.stop（）.css（{'zIndex'：'0'））.animate({
高度：$（this）.attr（“存储的高度”），
宽度：$（this.attr（“存储的”）
}，速度）；
$（this）.children（）.animate({
左：$（this）.attr（“存储的左”），
top:$（this.attr（“存储的\u top”）
}，速度）；
}
);

小提琴：你可以试试这个

    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);
    }
);

你可以试试这个

    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);
    }
);

---

回答得不错，但第二个框（如OP）中缺少了一个“a”您还删除了其中一个图像…Thang:您可以使用数组，但在这种情况下确实不需要。因为您正在将悬停事件放在所有div上。如果您不想这样做，您仍然可以使用类。如果您想使用数组，您必须将事件放在div id上（但读取起来很难看）.Zeaklous:谢谢。我的邋遢困扰着我>。Naoe:谢谢，但有时div在光标离开后无法恢复其原始大小，这是一个错误吗？我看到了问题。代码正在从框中设置当前大小。因此，如果你快速进出，变量会得到错误的值。你可以通过在在对象中输入属性，就像我在编辑中所做的那样。回答很好，但是你在第二个框（如OP）中缺少了一个“字符”，并且你还删除了一幅图像…Thang：你可以使用数组，但在这种情况下你真的不需要。因为您正在所有div上放置悬停事件。如果你不想这样，你仍然可以使用一个类。如果你想使用一个数组，你必须把事件放在div id上（但是读起来会很难看）。Naoe:谢谢，但是有时候在光标离开后div无法恢复其原始大小，这是一个bug吗？我看到了问题所在。代码正在从框中设置当前大小。因此，如果你快速进出，变量会得到错误的值。您可以通过在对象中存储交属性之前的值来解决此问题，就像我在编辑中所做的那样。另一个问题：我不能使用$（'#pic'+I），因此我使用了$（this）.children（）。那为什么我不能用它呢？这是一个bug吗？另一个问题是：我不能使用$（'#pic'+i），所以我使用了$（this.children（）。那为什么我不能用它呢？是虫子吗？？