1

私は非常に単純なことをしようとしています。グリッドに配置された多くの DIV ボックスがあります。それらの 1 つをホバーすると、ゆっくりと拡大し、中央から固定されてから、縮小して戻ります。ただし、他の 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;}

JQuery:

<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

私はあなたがやろうとしていることを理解していると思います :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 も同様に機能すると思います。

ここで見つけました：ホバーでdivを展開/縮小/ 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 に答える
0

シンプルで簡単なCSS3を使用するだけ

http://jsfiddle.net/mhkfH/

于 2012-04-23T18:47:33.510 に答える