[英]jQuery .hover doesn't loop
我在这里有一个Codepen: http ://codepen.io/huwrowlands/pen/GgmjqX
HTML:
<div class="site-branding">
<a href="#">
<img alt="Land" class="site-logo site-logo-land" src="http://website-test-lab.com/sites/landchain/wp-content/themes/landchain/assets/img/land.png" />
</a>
</div>
CSS:
/* Basic Styles */
.site-logo {
visibility: hidden;
max-width: 127px;
margin: 0 auto;
display: block;
}
/* Animation CSS */
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
@-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/**/
.slideRightLeft{
animation-name: slideRightLeft;
-webkit-animation-name: slideRightLeft;
animation-duration: 1s ;
-webkit-animation-duration: 1s;
animation-iteration-count: infinite;
-webkit-iteration-count: infinite;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes slideRightLeft {
0% {
transform: translateX(0%);
}
50% {
transform: translate(-50%);
}
100% {
transform: translateX(0%);
}
}
@-webkit-keyframes slideRightLeft {
0% {
-webkit-transform: translateX(0%);
}
50% {
transform: translate(-50%);
}
100% {
-webkit-transform: translateX(0%);
}
}
JS:
//Animations (Delay)
jQuery(function(){
setTimeout(function(){
jQuery('.site-logo-land').addClass("slideRight");
}, 1000);
});
jQuery( ".site-logo" ).hover(function() {
jQuery( this ).addClass( "slideRightLeft" );
});
在页面加载时,Land徽标通过添加一个由CSS关键帧动画控制的类来进行动画处理。 我也有一个jQuery代码片段,用于添加另一个类来为悬停时的Land标志动画。
我需要的是,每次用户将鼠标悬停在Land徽标上时,悬停效果都必须起作用。 目前,它只执行一次。
不确定,这与我的CSS关键帧动画代码有关,还是与我的jQuery有关。
提前致谢
jQuery hover
功能不能像css :hover
类那样工作,在css :hover
类中,样式仅应用于悬停,并在鼠标移出后删除。 您需要在mouseout上再次删除该类:
jQuery( ".site-logo" ).on('mouseout', function() {
jQuery( this ).removeClass( "slideRightLeft" );
});
您应该将以下内容添加到.slideRightLeft
类中:
-webkit-animation: slideRightLeft 1.3s infinite;
animation: slideRightLeft 1.3s infinite;
查看此链接以获取有效的演示。
您可以在此处使用jQuery的animate()
函数找到实现。 注意img
添加的style
。
JS
jQuery( ".site-logo" ).hover(function() {
jQuery( this ).animate({
left: "-=50"
}, 1000)
.animate({
left: "+=50"
}, 1000);
});
为什么不使用css:hover选择器。 您可以执行以下操作:
.site-logo:hover
{
animation-name: slideRightLeft;
-webkit-animation-name: slideRightLeft;
animation-duration: 1s ;
-webkit-animation-duration: 1s;
animation-iteration-count: infinite;
-webkit-iteration-count: infinite;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
我正在写一个答案,因为我不能评论我的代表低的原因(我至少需要50位才能这样做)。 但是,采纳了Mario AI的建议后, mouseout
问题就解决了。
首先,我对您的CSS做了一些工作。 我添加了一个transition: 1s transform
为site-logo
类,然后删除了.slideRightLeft
类的关键帧动画,并添加了一个简单的transform: translate(-50%)
因为我无法使过渡与关键帧动画。 经过这些更改,文本在悬停时向右滑动,如果您在任何时候取下鼠标,它将滑回原始位置,但是如果将鼠标悬停在图像上,它将保持在-50%位置,直到您取下了鼠标。 以下是相关的CSS类:
.site-logo {
max-width: 127px;
margin: 0 auto;
display: block;
transition: 1s transform;
-webkit-transition: 1s -webkit-transform;
}
.slideRightLeft{
transform: translate(-50%);
-webkit-transform: translate(-50%);
}
为了解决这个问题,我向您的JS添加了一个新的setTimeout 1s并删除了slideRightLeft
类,这样,如果将鼠标悬停在图像上,它将在1s内返回原始位置。 还看过什么马里奥曾与我认为这将是简单的把它所有的JS的完成.hover
功能,因此我改变addClass
到toggleClass
并且增加了removeClass
为slideRight
上悬停功能类。 这是更新的JS:
//Animations (Delay)
jQuery(function(){
setTimeout(function(){
jQuery('.site-logo-land').addClass("slideRight");
}, 1000);
});
jQuery( ".site-logo" ).hover(function() {
var curObj = this;
jQuery( this ).toggleClass( "slideRightLeft" );
setTimeout(function(){
jQuery( curObj ).removeClass( "slideRightLeft" );
}, 1000);
jQuery( this ).removeClass( "slideRight" );
});
您可以在这里查看: http : //codepen.io/anon/pen/PwmJRN
希望我能帮上忙!
发布此内容后,我在代码上发现了一个错误,如果您在动画完成之前留下鼠标,然后将其移出动画,则会再次触发,为解决此问题,我在JS中添加了以下内容:
jQuery( ".site-logo" ).on('mouseout', function(){
jQuery( this ).removeClass( "slideRightLeft" );
});
这解决了该问题,其他所有操作均像以前一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.