Question

每个字母都有一个CSS悬停事件。在悬停时，它会增加它的大小，并且在鼠标保持时，它会恢复正常。我想对页面加载显示相同的效果。当页面加载时，'H'将放大＆amp; out＆amp;那么'E'＆amp;然后'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');

Answer 1

你可以使用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插件。

Answer 2

不使用任何额外的插件：

您可以使用如下所示的闭包概念来实现：

<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>

SELECT CHARINDEX('t', 'TechOnTheNet.com', 3); -- Result: 7
                         ^---x-------->   

SELECT CHARINDEX('t', 'TechOnTheNet.com', 8); -- Result: 12
                              ^---x--->

Answer 3

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

递归版。 WOW.js很酷，但是你用js赢得了所有功能吗？

页面加载时的火悬停事件 - jquery

3 个答案: