jQuery Mouseenter/Mouseexit 上的卡片翻转 - 触发多次

Question

问题是，如果您执行 mouseenter 并快速摆动鼠标，它会多次触发翻转动作，使其闪烁或看起来很奇怪。 有没有更好的方法来做我在这里做的事情？

 jQuery('.card').mouseenter(function(e) { e.stopPropagation(); jQuery(this).addClass('flipped'); }).mouseleave(function(e) { e.stopPropagation(); jQuery(this).removeClass('flipped'); });

 .card { width: 150px; height: 300px; position: absolute; cursor: pointer; background-color: purple; /* Set the transition effects */ -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; -o-transition: -o-transform 0.4s; transition: transform 0.4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }.card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); }.card.front, .card.back { display: block; height: 100%; width: 100%; text-align: center; position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); }.card.front h3 { font-size: 30px; }.card.back p { height: 75px; }.card.front.card-text { padding: 0 25px; height: 100px; }.card.back { width: 100%; padding-left: 3%; padding-right: 3%; font-size: 16px; text-align: left; line-height: 25px; background-color: #ffffff; text-align: center; display: flex; align-items: center; }.card.back { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); }.card.apply-link { text-decoration: none; background-color: #fff; color: #000; padding: 8px 20px; }.card.back h3 { font-size: 24px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="front"> <h3>Big Header</h3> <div class="card-text">Info text here</div> </div> <div class="back" style="background-color: #b24377"> <h3>Up to 40% off</h3> <p>Text here </p> <a href="http://linkhere.com" class="apply-link">Apply Now</a> </div> </div>

问题是，如果您执行 mouseenter 并快速摆动鼠标，它会多次触发翻转动作，使其闪烁或看起来很奇怪。 有没有更好的方法来做我在这里做的事情？

Answer 1

解决这个问题的一种方法是在卡片周围添加一个包装器，并在包装器而不是卡片上监听事件

 jQuery('.wrapper').mouseenter(function(e) { e.stopPropagation(); let $this = jQuery(this).find('.card'); if(.$this.hasClass('flipped')){ $this;addClass('flipped'). } }).mouseleave(function(e){ e;stopPropagation(). jQuery(this).find('.card');removeClass('flipped'); });

 .wrapper{ width: 150px; height: 300px; }.card { width: 100%; height: 100%; cursor: pointer; background-color: purple; /* Set the transition effects */ -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; -o-transition: -o-transform 0.4s; transition: transform 0.4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }.card.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }.card.front, .card.back { display: block; height: 100%; width: 100%; text-align: center; position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); }.card.front h3 { font-size: 30px; }.card.back p { height: 75px; }.card.front.card-text { padding: 0 25px; height: 100px; }.card.back { width: 100%; padding-left: 3%; padding-right: 3%; font-size: 16px; text-align: left; line-height: 25px; background-color: #ffffff; text-align: center; display: flex; align-items: center; }.card.back { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }.card.apply-link { text-decoration: none; background-color: #fff; color: #000; padding: 8px 20px; }.card.back h3 { font-size: 24px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="card"> <div class="front"> <h3>Big Header</h3> <div class="card-text">Info text here</div> </div> <div class="back" style="background-color: #b24377"> <h3>Up to 40% off</h3> <p>Text here </p> <a href="http://linkhere.com" class="apply-link">Apply Now</a> </div> </div> </div>