1

我想做一些非常简单的事情。我有许多按网格排列的 DIV 框。当我悬停其中一个时，我希望它慢慢膨胀，从中间锚定，然后向下收缩。但是，如果不将其他 DIV 框推到一边，我就无法这样做。我希望悬停的 DIV 缓慢扩展，与其他 DIV 框重叠，而不移动它们。我已经用 JQuery 完成了其中的一些。这是我所拥有的：

CSS：

div{width: 100px; height: 100px; float: left;}
div#sq1{background-color: magenta;}
div#sq2{background-color: yellow;}
div#sq3{background-color: cyan;}

查询：

<script type='text/javascript' src='animated.js'></script>
<script type="text/javascript">
$(document).ready(function() {
    $("div").hover(function(){
        if (!$(this).hasClass('animated')) {
            $(this).dequeue().stop().animate({ width: "100px", height: "100px" });
    }
    }, function() {
        $(this).addClass('animated').animate({ width: "200px", height: "200px" }, "normal", "linear", function() {
        $(this).removeClass('animated').dequeue();
    });
});
</script>

HTML：

<div id="dequeue" class="blocks">
<div id="sq1"></div>
<div id="sq2"></div>
<div id="sq3"></div>
</div>

这是我希望它的外观：之前：http: //i39.tinypic.com/dh9x87.png 之后：http: //i44.tinypic.com/70cd35.png

谢谢！

4

6 回答 6

1

尝试使用负边距来诱使页面认为每个框仍然是 100px x 100px。因此，除了将宽度和高度从 100px 设置为 200px 之外，还要将边距设置为从 0 到 -50px 的动画。

希望这可以帮助 ：）

编辑

这是一个工作示例：

http://jsfiddle.net/sGDvj/1/

于 2012-04-21T04:06:00.420 回答
0

看看这个http://jsfiddle.net/tdsNF/2/ 并查看Expand/shrink div on hover/out with jQuery以获得学分。

于 2012-08-21T15:49:42.723 回答
0

只需简单易用的 CSS3

http://jsfiddle.net/mhkfH/

于 2012-04-23T18:47:33.510 回答
0

我想我明白你想要做什么：D 虽然我没有 100% 肯定的答案，但我确实有一个建议，尝试使用 div 的 z-index，也许让你悬停在上面像 5 或任何你想要的正数！

于 2012-04-21T04:05:49.157 回答
0

为什么不使用绝对位置？或者另一种方法是在悬停的那个上创建一个重复的 div 并为其设置动画。

于 2012-04-21T04:08:25.447 回答
0

看看这个例子；我认为这就是你想要做的。 http://jsfiddle.net/tdsNF/2/

它是一个带有图像的扩展器，但我相信 div 也可以工作。

在这里找到它：Expand/shrink div on hover/out with jQuery

var $imageWidth     = 92,    // with borders
$imageColumns    = 10;    // images across

$("#container > div .img").each(function(index) {
var $left = (index % $imageColumns * $imageWidth);
$(this).css("left", $left + "px");
});

$(".img a img").hover(function() {
    $(this).closest(".img").css("z-index", 1);
    $(this).stop(true,true).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
    $("#name").css("color", "#242424").html($(this).attr("data-name"));
    $("#school").css("color", "#242424").html($(this).attr("data-school"));
}, function() {
$(this).closest(".img").css("z-index", 0);
$(this).stop(true,true).animate({ height: "90", width: "90", left: "+=55", top: "+=55"     }, "fast");
});​
于 2012-08-25T21:49:14.193 回答