团队成员块Hover动画问题：非首个成员左移及复位异常求助

需求说明 #

• 5个成员卡片横向排列
• 鼠标悬停第一个卡片时：显示其详情内容覆盖其他卡片，其余卡片透明度变为0；鼠标离开后恢复原状
• 鼠标悬停第2-5个卡片时：该卡片的详情内容左移至第一个卡片的位置显示，其余卡片执行透明度切换（0→1/1→0），且除第一个卡片外，所有被悬停的卡片都要执行左移动画

现有代码问题 #

目前使用的jQuery代码存在以下问题：

• 左移动画无有效偏移，鼠标离开后无法复位到初始位置
• 设置pointer-events导致Hover时出现闪烁现象

现有代码：

$(document).ready(function(){
    $(".person").mouseenter(function(){
        $(".person").not(this).stop(true, true).animate({ left: "-=0" }, "slow");
        $(".person").not($(this)).animate({"opacity":"0"}, "slow");
        $(".person").not($(this)).css("pointer-events","none");
    });
    $(".person").mouseleave(function(){
        $(".person").not(this).stop(true, true).animate({ left: "auto" }, "slow");
        $(".person").not($(this)).animate({"opacity":"1"}, "slow");
        $(".person").not($(this)).css("pointer-events",""");
    });
});

解决方案 #

1. 修复左移动画与复位逻辑 #

• 提前计算并存储每个卡片的初始位置，避免使用auto作为动画目标值（jQuery animate不支持该值）
• 针对非第一个卡片，计算其到第一个位置的偏移量，悬停时移动到目标位置，离开时回到初始位置

调整后的核心逻辑代码：

$(document).ready(function(){
    // 初始化每个卡片的初始位置并存储
    const cardWidth = $(".person").outerWidth(true);
    $(".person").each(function(index){
        const initialLeft = index * cardWidth;
        $(this).data("initialLeft", initialLeft);
        $(this).css("left", `${initialLeft}px`);
    });

    $(".person").mouseenter(function(){
        const $target = $(this);
        const targetIndex = $target.index();
        
        // 非第一个卡片左移到第一个位置
        if(targetIndex !== 0){
            $target.stop(true, true).animate({ left: 0 }, "slow");
        }

        // 其他卡片透明度置0
        $(".person").not($target).stop(true, true).animate({ opacity: 0 }, "slow");
    });

    $(".person").mouseleave(function(){
        const $target = $(this);
        const targetIndex = $target.index();
        
        // 非第一个卡片回到初始位置
        if(targetIndex !== 0){
            $target.stop(true, true).animate({ left: $target.data("initialLeft") }, "slow");
        }

        // 其他卡片恢复透明度
        $(".person").not($target).stop(true, true).animate({ opacity: 1 }, "slow");
    });
});

2. 解决Hover闪烁问题 #

• 直接移除pointer-events: none的设置，该属性会导致鼠标快速切换时触发mouseleave事件，引发闪烁
• 保留stop(true, true)确保每次动画触发前清空队列，避免累积动画导致的异常

3. 详情内容显示补充 #

给每个卡片添加详情容器，默认隐藏，悬停时显示：

<div class="person">
    <div class="person-thumb">成员缩略图</div>
    <div class="person-detail">成员详情内容</div>
</div>

对应CSS：

.person {
    position: relative;
    width: 200px;
    height: 300px;
    float: left;
    overflow: hidden;
}
.person-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: none;
    z-index: 10;
}
.person:hover .person-detail {
    display: block;
}

当非第一个卡片左移到初始位置时，详情内容会自然覆盖原区域，符合需求效果。

内容的提问来源于stack exchange，提问作者Sandi Budic