时间戳

首页 > 解决方案 > 使用 JQuery 悬停剪辑我的引导卡时“抽搐”

javascript - 使用 JQuery 悬停剪辑我的引导卡时“抽搐”

问题描述

我有一个问题，当我点击一个font awesome图标时我的card翻转（让它工作正常）但是当我hover在icon它“抽搐”时，有时开始翻转卡片但然后停止。

我用我正在使用的所有代码创建了这个小提琴，它也在这样做，所以我知道它没有覆盖我代码中的任何内容。

HTML

<div id="col" class="col-12 col-md-4">
    <div class="flip">
        <div id="trunkCard" class="card">
            <div class="face front">
                <div class="card-body" style="padding-top: .5rem">
                    <div class="form-group row">
                        <div class="col-12 pr-0" style="display: inline-flex">
                            <div class="alert-success card-icon w-100">
                                <canvas id="extensions" class=""></canvas>
                            </div>
                            <i id="trunkIcon" class="fas fa-info-circle fa-4x text-info pl-3" style="cursor: pointer; height: fit-content"></i>
                        </div>
                    </div>
                    <div class="form-group row dashboardCardHeadingRow">
                        <div class="col-12">
                            <div class="card-subtitle text-muted">Extensions</div>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="card-subtitle text-muted">Billable</div>
                            <h4 class="mb-0">0</h4>
                        </div>
                        <div class="col-6">
                            <div class="card-subtitle text-muted">Non-billable</div>
                            <h4 class="mb-0">0</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="face back">
                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat animi nobis quia. Adipisci veritatis nihil, quo impedit aliquid provident maxime
                        maiores
                        explicabo incidunt. Iste ea eius rem eveniet! Atque, exercitationem?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat animi nobis quia. Adipisci veritatis nihil, quo impedit aliquid provident maxime
                        maiores
                        explicabo
                        incidunt. Iste ea eius rem eveniet! Atque, exercitationem?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat animi nobis quia. Adipisci veritatis nihil, quo impedit aliquid provident maxime
                        maiores
                        explicabo
                        incidunt. Iste ea eius rem eveniet! Atque, exercitationem?</p>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery

$("#extInfoIcon").hover(function () {
    $('#extCard').addClass('flipped');
 }, function () {
     $('#extCard').removeClass('flipped');
});

CSS

.flip {
    -webkit-perspective: 800;
    perspective: 800;
    position: relative;
    text-align: center;
}

.flip .card.flipped {
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}

.flip .card {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
    background-color: #fff;
}

.flip .card .face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
}

.flip .card .front {
    z-index: 1;
}

.flip .card .back {
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
    position: absolute;
}

同样，这是我使用上述代码的小提琴。

标签： javascriptjqueryhtmlcss

解决方案

我知道这不是你要问的，但你为什么不在点击时切换课程呢？IMO 悬停事件在这种情况下效果不佳，因为一旦光标位于图标上，就会添加类并开始动画。如果您不小心移动了一点光标，动画会重新开始，导致您看到的抽搐。

我个人会将添加/删除类位更改为：

$("#extInfoIcon").click(function () { $('#extCard').toggleClass('flipped'); }

然后只需添加另一个单击事件处理程序即可再次将其返回。抽搐没了。

推荐阅读