jQuery .hover 不循环

Question

我这里有一个代码笔：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 关键帧动画控制的 class 进行动画处理。我还有一个 jQuery 片段，用于添加另一个 class 以在悬停时为他的 Land 徽标制作动画。

我需要的是每次用户将鼠标悬停在 Land 徽标上时悬停效果起作用。目前，它只执行一次。

不确定，这是否与我的 CSS 关键帧动画代码有关，或者我需要用 jQuery.

修复的问题

提前致谢

Answer 1

jQuery hover 函数不像 css :hover class 那样工作，其中样式仅在悬停时应用，并在鼠标移出后删除。您需要再次删除 mouseout 上的 class：

jQuery( ".site-logo" ).on('mouseout', function() {
  jQuery( this ).removeClass( "slideRightLeft" );
});

Answer 2

您应该将以下内容添加到 .slideRightLeft class:

-webkit-animation: slideRightLeft 1.3s infinite;
animation: slideRightLeft 1.3s infinite;

查看此 link 以获得工作演示。

编辑

您可以使用 jQuery 的 animate() 函数 here 找到实现。请注意添加 style 到 img.

JS

jQuery( ".site-logo" ).hover(function() {
  jQuery( this ).animate({
    left: "-=50"
  }, 1000)
  .animate({
    left: "+=50"
  }, 1000);
});

Answer 3

为什么不使用 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;
}

Answer 4

我正在写一个答案，因为我无法评论我的低代表的原因（我至少需要 50 个才能这样做）。但是根据 Mario A 的建议，我解决了 mouseout.

上的跳跃问题

首先我对你的 css 做了一些工作。我向 site-logo class 添加了一个 transition: 1s transform，然后删除了 .slideRightLeft class 的关键帧动画并添加了一个简单的 transform: translate(-50%) 因为我无法使用关键帧动画进行过渡。通过这些更改，文本在悬停时向右滑动，如果您在任何时候松开鼠标，它会滑回原始位置，但如果您将鼠标悬停在图像上，它会保持在 -50% 的位置，直到你把鼠标拿下来了。以下是相关的 CSS classes:

.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 并让它删除 slideRightLeftclass，这样如果你将鼠标悬停在图像上它会 return 1秒内回到原位。还看到了 Mario A 用 JS 做了什么，我认为将它全部放在 .hover 函数上会更简单，因此我将 addClass 更改为 toggleClass 并添加了 removeClass 用于悬停功能上的 slideRight class。这是更新后的 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" );
});

这解决了这个问题，其他一切都像以前一样工作。

jQuery .hover 不循环

jQuery .hover doesn't loop

javascript

css

jquery

animation

编辑

编辑