javascript - jQuery - 展开 div 并且不做其他任何动作

Question

我有一些 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 在扩展时保持原位
2. 我希望如果鼠标在 div 上保持 0.5 秒，.user那么 div 应该被扩展，否则什么都不会发生。

Answer 1

这可以完全在 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;
}

达到预期的效果。

在此处查看演示。