Skip navigation
Currently Being Moderated

Transition speed

Jun 20, 2012 6:46 AM

I can't seem to change the speed of this transition:  http://dinghydogs.com/indexjquery.html.

 

I changed "slow" in this line:  $(this).stop().animate({opacity: "0.0"}, 'slow');   to '3000'  but it makes no difference.

 

Thanks

 
Replies
  • Currently Being Moderated
    Jun 20, 2012 12:10 PM   in reply to harvey waxman

    Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(),

    the .animate() method does not  make hidden elements visible as part of the effect.

     

    .animate is typically used to move or resize a selector from here to there with a default duration speed of ('slow'), ('normal)', ('fast)'  or with a custom integer in milliseconds ('2500').

     

    Simple animation demo:

     

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery .animate</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
    </script>
     </head>
    <body>
    <p>Layer1 is behind Layer2.</p>
     <div id="clickme">
    <button>Click to animate</button>
    </div>
     <div id="Layer1" style="width: 156px; height:130px; position:absolute; left:10px; top: 100px; background-color:#9C0; text-align:center">
    <h1>Layer1</h1>
    </div>
     <div id="Layer2" style="width: 156px; height:130px; position:absolute; left:10px; top: 100px; background-color: #FF0; text-align:center">
    <p> </p>
    <h2>Layer2</h2>
    </div>
     <script type="text/javascript">
    $('#clickme').click(function() {
      $('#Layer2').animate({
        opacity: 0.25,
        height: 'toggle',
        opacity: 'toggle'
      }, 2500, function() {
      });
    });
    </script>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 2:56 PM   in reply to harvey waxman

    Use ID #fade to trigger image ID #taper like so:

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    
    <!--jQuery latest-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    
    <style type="text/css">
     #fade {position:relative;}
    
    /**position where desired**/
    #fade img {position:absolute; top: 100px; left: 200px;}
    
    </style>
    </head>
    
    <body>
    
    <div id="fade">
    <img id="reg" src="http://dinghydogs.com/Images/iindexreg.jpg">
    <img id="taper" src="http://dinghydogs.com/Images/iindextaper.jpg">
    <!--end fade--></div>
       
    <!--jQuery fade function, put this above end of body-->
    <script type="text/javascript">
    $("#fade").hover(function(){
        $("#taper").animate({
         opacity: 0.25,
         opacity: 'toggle'
      }, 2500, function() {
        });
    });
    </script>
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 5:01 PM   in reply to harvey waxman

    Glad it works for you. 

     

    #1 Images are positioned absolute with same top & left coordinates so images are stacked by default.

     

    #2 The last <img src> is visible on page load.  The first <img src> is a layer below.  To reverse stacking order,  put "taper" first and "reg" second.  Change jQuery to this:

              $("#reg").animate({ 

     

    #3 I probably should have used opacity: 0  instead of 0.25.

     

    I think jQuery's site has the best basic resource material.

    http://docs.jquery.com/Main_Page

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points