jquery - 淡入和脉冲文本，延迟然后淡出 CSS3 动画？

Question

我一直在尝试对我网站上的一段文字创建效果，但运气不佳。我希望用 CSS 创建它，但如果有人也可以建议一种使用 jQuery 的方法，那么我会尝试任何方法。

我基本上想淡入，然后当它淡入时它会脉冲然后延迟一段时间然后淡出。我希望这发生在一个循环中。

我有一个幻灯片，我基本上希望四个幻灯片/标题中的每一个都淡入当前设置在带有关键帧的循环上的每个相应幻灯片。我需要能够将每个标题与它附带的幻灯片一起放入。

例如：

<div>
    <ul>
      <li>
         <h2 class="title1">Title One</h2>
         <img src="../" />
      </li>
      <li>
         <h2 class="title1">Title Two</h2>
         <img src="../" />
      </li>
      <li>
         <h2 class="title1">Title Three</h2>
         <img src="../" />
      </li>
      <li>
         <h2 class="title1">Title Four</h2>
         <img src="../" />
      </li>
    </ul>
</div>

Answer 1

您要求的 JQuery 解决方案..

http://jsfiddle.net/jFIT/9N5Aa/2/

doEffect($('li'));


function doEffect(ctrl){

 $(ctrl).fadeIn(500, function() {
   ctrl.effect( "pulsate", 5000 ).fadeOut(500);
   doEffect(ctrl);
  });
 }

Answer 2

我们可以尝试使用 Animate.css - https://github.com/daneden/animate.css

$('.title1').addClass('animated pulse');

$('.title1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);