Javascript 在再次操作之前，是否有办法确保所有元素都已重置到原始位置？

首先，我知道这是个大问题。我在寻找更多的想法和指导，而不是一个完整的解决方案。我正在建立一个在屏幕上有十张卡片的网站。每张卡片与上一张卡片略微重叠。当鼠标放置在一张卡上时，其他卡应移开，突出显示的卡应展开。是否有一种方法可以使光标离开当前卡后，在开始任何其他操作之前，所有卡都返回其原始位置？我已经包含了当前.html文件中的所有代码

我已经尝试在HTML文档上使用onMouseOver和onMouseOut根据调用的函数来回移动元素

我尝试在timeline类中使用GSAP，但我不知道如何制作一个可以播放、停止、反转等的动画

我目前已经设置好添加和删除带有超时的事件侦听器，以限制调用函数的速度

var cards=document.getElementsByClassName（'card'）；
无功电流卡；
var电流指数；
var leftSpread=150；
var rightSpread=200；
var initialOffset=100；
（函数initialLoad（）{
对于（变量i=0；i0）{
卡片[i].style.left=cards[i-1].offsetLeft+initialOffset+px；
}
}
})();
功能手柄通风（evt）{
开关（电动类型）{
案例“mouseenter”：
这个.cardMouseOver（evt）；
打破
案例“mouseout”：
这是卡德穆塞特（evt）；
打破
违约：
返回；
}
}
功能cardMouseOver（事件）{
currentIndex=event.target.style.zIndex；
event.target.style.zIndex=10；
对于（变量i=0；icurrentCard），则为else{
卡片[i].style.left=cards[i].offsetLeft+rightspand+px；
}
}
cards[currentCard].removeEventListener（“mouseenter”，这个）；
}
函数cardMouseOut（事件）{
卡片[currentCard].style.zIndex=currentIndex；
setTimeout（函数（）{
对于（变量i=0；icurrentCard），则为else{
卡片[i].style.left=cards[i].offsetLeft-rightspand+'px'；
}
}
}

正文{
背景色：#2424；
填充：0；
保证金：0；
}
.信用卡容器{
背景：#fff；
保证金：20px自动；
位置：绝对位置；
左：21%；
顶部：375px；
}
.卡片{
位置：绝对位置；
背景：rgb（255、255、255）；
边框：1px纯黑；
高度：250px；
过渡：0.2s；
宽度：200px；
盒影：-1px 0px 1px 1px rgba（0,0,0,0.747）；
}
.卡：悬停{
过渡：所有0.2秒缓解；
宽度：250px；
高度：350px；
顶部：-75px；
}

---

有几种方法可以做到这一点

您可以有一个布尔标志，当元素移动/移位时进行切换。当元素返回到其起始位置时，可以从那里重新切换它

您可以通过类（.inUse、.active、.hovered等）处理动画和CSS更改，然后运行循环，检查是否有任何元素具有“active”类

编辑：另外，关于动画，如果你知道怎么做，它们相当简单！我建议您阅读W3Schools关于@keyframes的文章

---

您还可以将动画方向设置为正向、反向等。它非常健壮

有几种方法可以做到这一点

您可以有一个布尔标志，当元素移动/移位时进行切换。当元素返回到其起始位置时，可以从那里重新切换它

您可以通过类（.inUse、.active、.hovered等）处理动画和CSS更改，然后运行循环，检查是否有任何元素具有“active”类

编辑：另外，关于动画，如果你知道怎么做，它们相当简单！我建议您阅读W3Schools关于@keyframes的文章

---

您还可以将动画方向设置为正向、反向等。它非常健壮

我通过继续挖掘找到了答案。这比我想象的要简单得多。因为我想在用鼠标悬停卡片时获得平滑的动画，所以我使用了CSS转换和变换属性

通过创建以下CSS类：

.card {
    position: absolute;
    background: rgb(255, 255, 255);
    height: 275px;
    width: 200px;
    box-shadow: -1px 0px 3px 1px rgba(0, 0, 0, 0.747);
    transition: all .4s ease;
}

.card.left {
    transform: translateX(-175px);
}

.card.right {
    transform: translateX(175px);
}

我可以在“mouseenter”和“mouseover”事件侦听器中添加和删除，以获得我想要的效果

function handleEvent(evt) {
    switch(evt.type) {
        case "mouseenter":
            this.cardMouseOver(evt);
            break;
        case "mouseout":
            this.cardMouseOut(evt);
            break;
        default:
            return;
    }
}

function cardMouseOver(event) {
    for (var i = 0; i < cards.length; i++) {
        if (event.target == cards[i]) {
            currentCard = i;
        }
    }

    for (var i = 0; i < cards.length; i++) {
        if (i < currentCard) {
            if (!cards[i].classList.contains('left')) {
                cards[i].classList.add('left');
            }
        } else if (i > currentCard) {
            if (!cards[i].classList.contains('right')) {
                cards[i].classList.add('right');
            }
        }
    }
}

function cardMouseOut(event) {
    for (var i = 0; i < cards.length; i++) {
        if (i < currentCard) {
            if (cards[i].classList.contains('right')) {
                cards[i].classList.remove('right');
            } else if (cards[i].classList.contains('left')) {
                cards[i].classList.remove('left');
            }
        } else if (i > currentCard) {
            if (cards[i].classList.contains('left')) {
                cards[i].classList.remove('left');
            } else if (cards[i].classList.contains('right')) {
                cards[i].classList.remove('right');
            }
        } else {
            if (cards[i].classList.contains('left')) {
                cards[i].classList.remove('left');
            } else if (cards[i].classList.contains('right')) {
                cards[i].classList.remove('right');
            }
        }
    }
}

功能手柄事件（evt）{
开关（电动类型）{
案例“mouseenter”：
这个.cardMouseOver（evt）；
打破
案例“mouseout”：
这是卡德穆塞特（evt）；
打破
违约：
返回；
}
}
功能cardMouseOver（事件）{
对于（变量i=0；i当前
.card {
    position: absolute;
    background: rgb(255, 255, 255);
    height: 275px;
    width: 200px;
    box-shadow: -1px 0px 3px 1px rgba(0, 0, 0, 0.747);
    transition: all .4s ease;
}

.card.left {
    transform: translateX(-175px);
}

.card.right {
    transform: translateX(175px);
}

function handleEvent(evt) {
    switch(evt.type) {
        case "mouseenter":
            this.cardMouseOver(evt);
            break;
        case "mouseout":
            this.cardMouseOut(evt);
            break;
        default:
            return;
    }
}

function cardMouseOver(event) {
    for (var i = 0; i < cards.length; i++) {
        if (event.target == cards[i]) {
            currentCard = i;
        }
    }

    for (var i = 0; i < cards.length; i++) {
        if (i < currentCard) {
            if (!cards[i].classList.contains('left')) {
                cards[i].classList.add('left');
            }
        } else if (i > currentCard) {
            if (!cards[i].classList.contains('right')) {
                cards[i].classList.add('right');
            }
        }
    }
}

function cardMouseOut(event) {
    for (var i = 0; i < cards.length; i++) {
        if (i < currentCard) {
            if (cards[i].classList.contains('right')) {
                cards[i].classList.remove('right');
            } else if (cards[i].classList.contains('left')) {
                cards[i].classList.remove('left');
            }
        } else if (i > currentCard) {
            if (cards[i].classList.contains('left')) {
                cards[i].classList.remove('left');
            } else if (cards[i].classList.contains('right')) {
                cards[i].classList.remove('right');
            }
        } else {
            if (cards[i].classList.contains('left')) {
                cards[i].classList.remove('left');
            } else if (cards[i].classList.contains('right')) {
                cards[i].classList.remove('right');
            }
        }
    }
}