[英]jQuery .hover doesn't loop
I have a codepen here: http://codepen.io/huwrowlands/pen/GgmjqX 我在这里有一个Codepen: http ://codepen.io/huwrowlands/pen/GgmjqX
HTML: 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: 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: JS:
//Animations (Delay)
jQuery(function(){
setTimeout(function(){
jQuery('.site-logo-land').addClass("slideRight");
}, 1000);
});
jQuery( ".site-logo" ).hover(function() {
jQuery( this ).addClass( "slideRightLeft" );
});
On page load, the Land logo animates in by adding a class which is controlled by CSS keyframe animations. 在页面加载时,Land徽标通过添加一个由CSS关键帧动画控制的类来进行动画处理。 I also have a jQuery snippet to add another class to animate he Land logo on hover.
我也有一个jQuery代码片段,用于添加另一个类来为悬停时的Land标志动画。
What I require, is that the hover effect to work each time a user hovers over the Land logo. 我需要的是,每次用户将鼠标悬停在Land徽标上时,悬停效果都必须起作用。 Currently, it only does this once.
目前,它只执行一次。
Not sure, if this is something to do with my CSS keyframes animation code, or something I need to fix with my jQuery. 不确定,这与我的CSS关键帧动画代码有关,还是与我的jQuery有关。
Thanks in advance 提前致谢
jQuery hover
function doesn't work like the css :hover
class where styles are just applied on hover, and removed after mouseout. jQuery
hover
功能不能像css :hover
类那样工作,在css :hover
类中,样式仅应用于悬停,并在鼠标移出后删除。 You need to remove the class on mouseout again: 您需要在mouseout上再次删除该类:
jQuery( ".site-logo" ).on('mouseout', function() {
jQuery( this ).removeClass( "slideRightLeft" );
});
You should add the following to the .slideRightLeft
class: 您应该将以下内容添加到
.slideRightLeft
类中:
-webkit-animation: slideRightLeft 1.3s infinite;
animation: slideRightLeft 1.3s infinite;
Check this link for a working demo. 查看此链接以获取有效的演示。
You can find the implementation using jQuery's animate()
function here . 您可以在此处使用jQuery的
animate()
函数找到实现。 Note the added style
to the img
. 注意
img
添加的style
。
JS JS
jQuery( ".site-logo" ).hover(function() {
jQuery( this ).animate({
left: "-=50"
}, 1000)
.animate({
left: "+=50"
}, 1000);
});
Why not use css:hover selector. 为什么不使用css:hover选择器。 You can do something like this:
您可以执行以下操作:
.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;
}
I'm writing an answer since I cannot comment cause of my low rep (I need at least 50 to do so). 我正在写一个答案,因为我不能评论我的代表低的原因(我至少需要50位才能这样做)。 But taking the suggestions from Mario AI resolved the issue of the jump on
mouseout
. 但是,采纳了Mario AI的建议后,
mouseout
问题就解决了。
First of all I made some work on your css. 首先,我对您的CSS做了一些工作。 I added a
transition: 1s transform
to the site-logo
class, then I removed the keyframe animation for the .slideRightLeft
class and added a simple transform: translate(-50%)
since with I wasn't able to make the transition work with the keyframe animation. 我添加了一个
transition: 1s transform
为site-logo
类,然后删除了.slideRightLeft
类的关键帧动画,并添加了一个简单的transform: translate(-50%)
因为我无法使过渡与关键帧动画。 With these changes the text was sliding to the right on hover and if you took off your mouse at any point it would slide back into the original position, but if you left your mouse over the image it would remain at the -50% position until you took your mouse off. 经过这些更改,文本在悬停时向右滑动,如果您在任何时候取下鼠标,它将滑回原始位置,但是如果将鼠标悬停在图像上,它将保持在-50%位置,直到您取下了鼠标。 Here are the relevant CSS classes:
以下是相关的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%);
}
To resolve that I added a new setTimeout of 1s to your JS and have it remove the slideRightLeft
class, this way if you leave your mouse over the image it would return to the original position within 1s. 为了解决这个问题,我向您的JS添加了一个新的setTimeout 1s并删除了
slideRightLeft
类,这样,如果将鼠标悬停在图像上,它将在1s内返回原始位置。 Also having seen what Mario A had done with the JS I thought it would be simpler to have it all on the .hover
function, hence I change the addClass
to toggleClass
and added the removeClass
for the slideRight
class on the hover function. 还看过什么马里奥曾与我认为这将是简单的把它所有的JS的完成
.hover
功能,因此我改变addClass
到toggleClass
并且增加了removeClass
为slideRight
上悬停功能类。 Here's the updated JS: 这是更新的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" );
});
You can check it out here: http://codepen.io/anon/pen/PwmJRN 您可以在这里查看: http : //codepen.io/anon/pen/PwmJRN
Hope I could help! 希望我能帮上忙!
After publishing this I found a bug on the code where if you leave the mouse until the animation finishes and then move it out the animation fires up again, to resolve this I added the following to the JS: 发布此内容后,我在代码上发现了一个错误,如果您在动画完成之前留下鼠标,然后将其移出动画,则会再次触发,为解决此问题,我在JS中添加了以下内容:
jQuery( ".site-logo" ).on('mouseout', function(){
jQuery( this ).removeClass( "slideRightLeft" );
});
This solves that issue and everything else working as before. 这解决了该问题,其他所有操作均像以前一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.