页面加载时触发悬停事件 - jquery

Question

每个字母都有一个CSS hover事件。当悬停时，它会增大尺寸，当鼠标离开时，它会恢复正常大小。 我想展示相同的效果在页面加载时。 当页面加载时，“H”将缩放并且“E”，然后是“L”......一个接一个地。

以下是我尝试过但没有成功的 - http://jsfiddle.net/vrm0bve1/

HTML:

<span class="char1 animate">H</span>
<span class="char2 animate">E</span>
<span class="char3 animate">L</span>
<span class="char4 animate">L</span>
<span class="char5 animate">0</span>

CSS

     .animate {    
    font-size:14px;
    -webkit-transition: font-size 1s;
    -moz-transition: font-size 1s;
    -ms-transition: font-size 1s;
    -o-transition: font-size 1s;
    transition: font-size 1s;
}
.animate:hover {
    font-size: 3.5em;
}

JS

$(".char1").trigger('mouseover').trigger('mouseleave');
$(".char2").trigger('mouseover').trigger('mouseleave');
$(".char3").trigger('mouseover').trigger('mouseleave');
$(".char4").trigger('mouseover').trigger('mouseleave');
$(".char5").trigger('mouseover').trigger('mouseleave');

- Qwerty

---

请将以下与编程有关的内容从英语翻译成中文。仅返回已翻译的文本： - Sandeep Nayak

Answer 1

不使用任何额外插件:

你可以使用闭包的概念来实现，如下所示:

$(document).ready(function(){


  
    
var span = $("span[class]");    
for(var i=0; i<span.length;i++){
animate = function(x){
   //console.log(x); 
   setTimeout(function(){
       x.addClass("scale").prev().removeClass("scale");
       

   }, i*2000);   

};
    
animate(span.eq(i));    
    

};    

});

.animate {

    font-size:14px;
    -webkit-transition: font-size 1s;
    -moz-transition: font-size 1s;
    -ms-transition: font-size 1s;
    -o-transition: font-size 1s;
    transition: font-size 1s;
}
.scale {
    font-size: 3.5em;
}

.animate:hover{
    font-size: 3.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="char1 animate">H</span>
<span class="char2 animate">E</span>
<span class="char3 animate">L</span>
<span class="char4 animate">L</span>
<span class="char5 animate">0</span>

- Sandeep Nayak

Answer 2

http://jsbin.com/wafacawumi/edit?html,output

递归版本。WOW.js很酷，但是值得在你不会使用的所有功能上污染你的js吗？

- blade091

---

这是一个非常小的库，他可以在其他动画中使用它。你在代码中使用的jQuery要大10倍;) - max

开玩笑吧？wow.js压缩后只有8.23Kbs，还依赖于animate.css文件！怎么可能10行代码比2个请求和近10Kbs的代码还要大呢？ - blade091

$(".char1").trigger('mouseover').trigger('mouseleave'); 而他已经在使用jQuery，而你为他的项目增加了另一个层次的复杂性=）这是我的个人看法。 - blade091

好的，也许你是对的。顺便说一下，这与animate.css无关，我没有在我的示例中包含它。 - max

好的，没问题 - 我参考了他们的Github页面，他们将其指定为依赖项。无论如何 - UI /前端的主要规则是使用已经存在和经过充分测试的解决方案“生活在食物链的顶端”。所以你的版本已经足够好了。如果我在30分钟内必须发布某些东西的压力下 - 我宁愿选择wow.js并忘记它，因为我会确信它不会破坏任何东西。无论如何 - 对于这样一个微不足道的问题，可以使用现有的词汇和框架来解决。我们两个都没有错，两种解决方案都能工作 =) - blade091

我同意，这取决于你要寻找什么。我假设他不想只用一个单词“你好”来建立一个网站，它必须是更大的东西 :) 随着今天互联网速度的提高，我认为这个插件对页面加载的影响将会是 ~0。但是有些网站每一毫秒都很重要，在那里 - 你的解决方案更好。抱歉我的英语不好 :) - max

Answer 3

你可以使用WOW.js来实现这个效果。

查看这个Fiddle。

HTML：

<span class="animated wow" data-wow-delay="1s">H</span>
<span class="animated wow" data-wow-delay="2s">E</span>
<span class="animated wow" data-wow-delay="3s">L</span>
<span class="animated wow" data-wow-delay="4s">L</span>
<span class="animated wow" data-wow-delay="5s">0</span>

CSS：

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: zoomInOut;
          animation-name: zoomInOut;
}
@-webkit-keyframes zoomInOut {
  0% {
    font-size: 14px;
  }
  50% {
    font-size: 3.5em;
  }
  100% {
    font-size: 14px;
  }
}
@keyframes zoomInOut {
  0% {
    font-size: 14px;
  }
  50% {
    font-size: 3.5em;
  }
  100% {
    font-size: 14px;
  }
}

JS：

new WOW().init();

请确保包含WOW.js插件。

- max