添加跳过按钮以快进.fadeIn / .fadeOut?

时间:2012-12-28 00:00:08

标签: javascript jquery html fadein fadeout

只是为了澄清一下,当你加载我的网站时,我有一些文字淡入(引用),然后淡出。之后,一段新文字(我的品牌名称)逐渐消失。

由于我希望人们有足够的时间阅读第一篇文章(引用),淡入和淡出有点长,但我不希望人们在第5次访问该网站后感到不耐烦每次都要等。

因此我想到了一个“类似跳过”的按钮或文本(IE:SKIP),这样他们就可以快速到达品牌名称所在的位置。

任何帮助将不胜感激!这是我现在拥有的一个例子!!

http://jsfiddle.net/K6SpB/

HTML

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>   
<center>
   <div id="mytext" align="center">
      <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td valign="middle" align="center">
               <table cellpadding="0" cellspacing="0" border="0">
                  <tr>
                     <td height="200">
                        <center>
                           <font size="4px" id="quote" color="black">THIS IS A QUOTE.</font>
                           <br>
                           <font size="12px" id="brandname" color="black">BRAND NAME.</font>
                        </center>
                     </td>                
                  </tr>    
               </table>
            </td>
         </tr>
      </table>
   </div>
</center>

JAVASCRIPT

$(document).ready(function() {
    $('#quote').hide().delay(1000).fadeIn(5000).delay(3000).fadeOut(2000);
    $('#brandname').hide().delay(11500).fadeIn(2000);
});​

CSS

<style type="text/css">
   #quote, #brandname {
      position:relative;
      display: none;
      float:center;
   }
   #mytext {

   }
</style>​

1 个答案:

答案 0 :(得分:3)

你可能想要jQuery .stop()(http://api.jquery.com/stop/)

所以,如果你添加一个Skip链接:

<a href="#" id="skip">Skip</a>

代码如下所示:

$('#skip').click(function(e) {
    e.preventDefault();
    $('#quote, #brandname').stop(true, true);
});

第一个“true”告诉jQuery从动画队列中删除任何待处理的动画,第二个“true”告诉它直接跳到动画的结尾。