Question

我正在使用jQuery创建动画着陆页。 enter image description here

在动画中，当鼠标悬停在图像的一部分上（被切片）时，它弹出来了。到目前为止，只有将部分的位置设置为绝对位置，我才能做到这一点。如果它们不是绝对的，那么一旦我放大并移出其中一个部分，它们就会移动。

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

谢谢！

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

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

Answer 1

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

现在每个图像都放在一起，对吧？相反，尝试将白色块放在彼此旁边作为占位符来保持尺寸，然后将图像放在这些框内。

我不知道您的实际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>

<强> CSS

div#blocks { /*The wrapping box*/
    height: 200px;
    width: 300px;
    /*Remember to add paddings, margins, borders etc.*/
}

div#blocks div { /*Creating the blocks*/
    position: relative;
    float: left;
    height: 200px;
    width: 50px;
}

/*The images now fill nothing at all*/
div#blocks img {
    position: absolute;
    top: 0;
    left: 0;
}

<强>的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：未经测试，但非常简单。你可以尝试一下。

jquery / css - 弹出动画

1 个答案: