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

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

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

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

Answer 2

您请求的JQuery解决方案..

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

doEffect($('li'));


function doEffect(ctrl){

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

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

2 个答案: