jQuery .hover没有循环

时间:2015-01-19 12:28:22

标签: javascript jquery css css3 animation

我在这里有一个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修复的东西。

提前致谢

3 个答案:

答案 0 :(得分:1)

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

-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);
});

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我正在写一个答案,因为我不能评论我的低代表的原因(我需要至少50个这样做)。但是从马里奥A的建议中我解决了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内返回到原始位置。还看过Mario A用JS做了什么我认为在.hover函数上完成所有操作会更简单,因此我将addClass更改为toggleClass并添加了{{ 1}}用于悬停函数的removeClass类。这是更新的JS:

slideRight

您可以在此处查看:http://codepen.io/anon/pen/PwmJRN

希望我能帮忙!

修改

发布后我在代码中发现了一个错误,如果你离开鼠标直到动画结束然后将其移出动画再次启动,为了解决这个问题,我将以下内容添加到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" );
});

这解决了这个问题以及其他一切工作。