jquery/css-弹出式动画

我正在使用jQuery创建一个动画登录页

在动画中，当鼠标位于图像的某个部分（已切片）上时， 它突然冒出来。到目前为止，只有当我将各部分的位置设置为绝对位置时，我才能做到这一点。如果它们不是绝对定位的，一旦我放大并移出其中一个部分，它们就会移动

有没有办法在不将位置设置为绝对位置的情况下获得这种效果

谢谢大家!

编辑：这是我正在使用的代码

$(".block").mousemove(function () {
    $(this).css("z-index", "1010");
    $(this).stop().animate({
        "width": "170px",
        "height": "400px",
        "top": "-12px",
        "left": "-13px"
    }, {
        duration: 300,
        easing: "swing",
        queue: true
    });
});

$(".block").mouseleave(function () {
    $(this).stop().animate({
        "width": "149px",
        "height": "374px",
        "top": "0px",
        "left": "0px"
    }, {
        duration: 500,
        easing: "swing",
        queue: true,
        complete: function () {
            $(this).css("z-index", "1000");
        }
    });
});

---

您的问题的解决方案可以是：

现在每个图像都是并排放置的，对吗？相反，请尝试将白色块作为占位符放置在一起，以保持尺寸，然后将图像放置在这些框中

我不知道您的实际html代码，但我可以看到您的示例图片中有六个块

下面，我尝试根据您提供的脚本，在一个非常简单的html框结构上设置一个悬停事件。在脚本中，您有一些关于

z-index

值的信息，以及

complete

时发生的信息。我已经删除了它，因为我无法理解它的含义，也无法看到它与

stop（）

一起工作，但是您可以编辑它以符合您的意愿

另外，我没有使用太多的

class

或

id

，但在更大的页面上可能需要这样做。 编辑：确保div的尺寸与其包含的图像完全相同

HTML

<div id="blocks">

    <!--The divs are the blocks - the imgs are the content-->
    <div><img src="block1.png"></div>
    <div><img src="block2.png"></div>
    <div><img src="block3.png"></div>
    <div><img src="block4.png"></div>
    <div><img src="block5.png"></div>
    <div><img src="block6.png"></div>

</div>

Javascript

$("div#blocks img").hover(

    function(){ /*On mousein*/
    $(this).stop().animate({

        "width": $(this).width() + 20, /*Enlarging by 20 x 20px*/
        "height": $(this).width() + 20,
        "top": "-10px", /*Keeping image centeret*/
        "left": "-10px",
        "z-index": "10"

        }, {

        duration: 300,
        easing: "swing",
        queue: true

        });
    },
    function(){ /*On mouseout*/
    $(this).stop().animate({

        "width": $(this).width(), /*Returning to original size*/
        "height": $(this).width(),
        "top": "0px", /*Keeping image centeret*/
        "left": "0px",
        "z-index": "0"

        }, {

        duration: 500,
        easing: "swing",
        queue: true

        });
    }

);

---

PS：未经测试，但相当简单。你可以试一试。

你能提供第二个模拟的快照来展示你想要实现的目标吗？还有，到目前为止还有什么代码可以比较吗？@Brian Scott-我编辑了这篇文章并添加了我使用的代码。我基本上希望我悬停的div垂直和水平拉伸，并在两侧重叠切片。好的，这可以通过在上面放置一个白色的占位符div和

来实现。占位符div永远不会改变其大小，但是放置在相同坐标处的img可以通过jQuery放大或移动。谢谢您的回复。对不起，我不明白。你能编辑答案并详细说明吗？

$("div#blocks img").hover(

    function(){ /*On mousein*/
    $(this).stop().animate({

        "width": $(this).width() + 20, /*Enlarging by 20 x 20px*/
        "height": $(this).width() + 20,
        "top": "-10px", /*Keeping image centeret*/
        "left": "-10px",
        "z-index": "10"

        }, {

        duration: 300,
        easing: "swing",
        queue: true

        });
    },
    function(){ /*On mouseout*/
    $(this).stop().animate({

        "width": $(this).width(), /*Returning to original size*/
        "height": $(this).width(),
        "top": "0px", /*Keeping image centeret*/
        "left": "0px",
        "z-index": "0"

        }, {

        duration: 500,
        easing: "swing",
        queue: true

        });
    }

);