向FastForward添加跳过按钮a .fadeIn / .fadeOut？ [英] Adding a Skip Button to FastForward a .fadeIn / .fadeOut?

问题描述

只是为了澄清，当你加载我的网站时，我有一些文本淡入（引用），然后淡出。因为我希望人们有足够的时间阅读第一个文本（引号），所以淡入和淡入淡出。然后，新的一点文字（我的品牌名称）会淡入。

淡出时间有点长，但我不希望人们在第五次访问该网站后不耐烦，并且每次都必须等待。

因此，我是思考一个跳过按钮或文本（IE：SKIP），以便他们可以快速前进到品牌名称淡入的位置。

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

http：/ /jsfiddle.net/K6SpB/

HTML

 < script src =http://code.jquery.com/jquery-1.4.4.min.jstype =text / javascript>< / script> 
< center> 
< div id =mytextalign =center> 
< table width =100％height =100％cellpadding =0cellspacing =0border =0> 
< tr> 
< td valign =middlealign =center> 
< table cellpadding =0cellspacing =0border =0> 
< tr> 
< td height =200> 
< center> 
< font size =4pxid =quotecolor =black>这是一个报价。< / font> 
< br> 
< font size =12pxid =brandnamecolor =black> BRAND NAME。< / font> 
< / center> 
< / td> 
< / tr> 
< / table> 
< / td> 
< / tr> 
< / table> 
< / div> 
< / center> 
  

JAVASCRIPT

 <$ （1000）.fadeIn（5000）.delay（3000）.fadeOut（2000）。（document.ready）（function（）{
 $（'＃quote'）。hide（） ; 
 $（'＃brandname'）。hide（）。delay（11500）.fadeIn（2000）; 
}）; 
  

CSS

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

解决方案

您可能需要jQuery .stop（）（http://api.jquery.com/stop/）

因此，如果您添加跳过链接：

 < a href =＃id = 跳过 >跳过< / A> 
  

代码如下所示：

<$点击（函数（e）{
e.preventDefault（）;
$（'＃quote，#brandname'）。）pre $ $停止（true，true）;
}）;


第一个true告诉jQuery从动画队列中删除所有未决的动画，第二个true 告诉它直接跳到动画的结尾。

Just to clarify, when you load my site I have a bit of text that fades in (quote), and then fades out. Afterwards a new bit of text (my brand name) fades in.

Since I want people to have enough time to read the first text (the quote) the fade in and fade out are a bit long, however I don't want people to get impatient after visiting the site for the 5th time and having to wait every time.

Therefore I was thinking of a "skip-like" button or text (IE: SKIP) so that they can fastforward to where the brand name fades in.

Any help would be appreciated!!! Here's an example of what I currently have!!

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

解决方案

You probably want jQuery .stop() (http://api.jquery.com/stop/)

So, if you add a Skip link:

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

The code would look like this:

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

The first "true" tells jQuery to remove any pending animations from the animation queue, the second "true" tells it to skip straight to the end of the animation.

这篇关于向FastForward添加跳过按钮a .fadeIn / .fadeOut？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！