Adding a Skip Button to FastForward a .fadeIn / .fadeOut?

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/14062908/adding-a-skip-button-to-fastforward-a-fadein-fadeout

标签

javascript

jquery

html

fadein

fadeout