1

私はいくつかの div を持っており、jQuery を介してそれにいくつかの影響を与えています。div にカーソルを合わせると、展開されます。しかし、その横と下の div は一緒に移動します。1k 再生成後に、stackoverflow で指定された拡張可能なユーザー カードと同じ効果が必要です。

これが私がやったことです。

JS:

$(document).ready(function () {
    var delay = 1000;
    $(".user").hover(function () {
        $(this).css("background-color", "#eee");
        $(this).delay(delay).animate({
            width: '350px',
            height: '200px'
        });
        $(this).find("img").delay(delay).animate({
            marginTop: '+=5px',
            marginLeft: '+=5px'
        });
    }, function () {
        $(this).css("background-color", "#fff");
        $(this).delay(delay).animate({
            width: '300px',
            height: '50px'
        });
        $(this).find("img").delay(delay).animate({
            marginTop: '-=5px',
            marginLeft: '-=5px'
        });
    });
});

つまり、一言で言えば：

  1. div が展開されたときに div をそのままにしておきたい
  2. マウスがdivに0.5秒残っている場合、.userdivを展開する必要があります。それ以外の場合は何も起こりません。
4

1 に答える 1

3

これは純粋に CSS3 で行うことができます。探しているものは次のとおり<div class="user">です<div class="userWrap">。次に、次の CSS を使用します。

.userWrap {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 50px;
    overflow: visible;
    z-index: 1;
}
.userWrap:hover {
    z-index: 2;
}
.user {
    position: absolute;
    width: 300px;
    height: 50px;
    margin-bottom: 5px;
    background: #fff;
    transition: width 0.3s, height 0.3s;
}
.user:hover {
    width: 350px;
    height: 200px;
    background: #eee;
    transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s;
}

望ましい効果を達成するため。

ここでデモをご覧ください。

于 2013-07-02T15:58:33.787 に答える