使用 jQuery 鼠标悬停状态切换 CSS 过渡 on/off

Question

我试图在取消悬停元素时停止“反转”css 转换。我希望它保持在“前进”位置，当我再次悬停它时，它应该重复“前进”过渡等等。

这是我尝试过的：

jquery

jQuery(document).ready(function() {

jQuery("#fancy_icon-51-66").mouseleave(function () {
  jQuery(this).removeClass("start-transition");
  jQuery(this).addClass("stop-transition");
});
jQuery("#fancy_icon-51-66").mouseenter(function () {
  jQuery(this).removeClass("stop-transition");
  jQuery(this).addClass("start-transition");
});

});

css

.stop-transition {

-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;

}

.start-transition {

-webkit-transition: transform 0.5s !important;
-moz-transition: transform 0.5s !important;
-o-transition: transform 0.5s !important;
transition: transform 0.5s !important;

}

过渡本身是一个变换 -> 旋转 360°。

如您所见，我是一名寻求帮助以实现此类目标的初学者。感谢您的每一个建议！

Answer 1

HTML

 <div id='element'>HELLO</div>

CSS

 #element {position:relative; float:left; width:20%; height:20%; background:#000; border:1px solid #fff; color:#fff; padding:20px; text-align:center;}

 .animate {animation:animated 1s linear;}
 @keyframes animated {
 to {transform:rotate(360deg);}
 }

jQuery (3.4.1)

 $(document).on('mouseenter','#element',function() {
 $('#element').addClass('animate');
 $('#element').on("animationend", function() {
 $('#element').removeClass('animate');
 });
 });

$(document).on('mouseenter','#element',function() {
$('#element').addClass('animate');
$('#element').on("animationend", function() {
$('#element').removeClass('animate');
});
});

#element {position:relative; float:left; width:20%; height:20%; background:#000; border:1px solid #fff; color:#fff; padding:20px; text-align:center;}

.animate {animation:animated 1s linear;}
@keyframes animated {
to {transform:rotate(360deg);}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='element'>HELLO</div>

https://jsfiddle.net/w7txpcmk/

Answer 2

外部CSS

要使用 Font Awesome 图标，请在 HTML 页面的 <head> 部分中添加以下行

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

CSS

div i {
    padding: 10px;
    transition: transform 1.5s !important;
}
    
div i:hover {
    -webkit-transition: transform 1.5s !important;
    -moz-transition: transform 1.5s !important;
    -o-transition: transform 1.5s !important;
    transform: rotate(360deg);
}

HTML

在 HTML 页面的 <body> 部分使用以下代码

<div>
    <i class="fa fa-thumbs-o-up" style="font-size:48px;"></i>
</div>

div i {
  padding: 10px;
  transition: transform 1.5s !important;
}

div i:hover {
  -webkit-transition: transform 1.5s !important;
  -moz-transition: transform 1.5s !important;
  -o-transition: transform 1.5s !important;
  transform: rotate(360deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <i class="fa fa-thumbs-o-up" style="font-size:48px;"></i>
</div>

使用 jQuery 鼠标悬停状态切换 CSS 过渡 on/off

Toggle CSS transition on/off with jQuery mouseover state

jquery

css

transition