6 Replies Latest reply: Jun 20, 2012 6:03 PM by harvey waxman RSS

    Transition speed

    harvey waxman Community Member

      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

        • 1. Re: Transition speed
          Nancy O. CommunityMVP

          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.

          • 2. Re: Transition speed
            harvey waxman Community Member

            Thank you so much, Nancy, as if you had nothing better to do than help an old curmudgeon. 

             

            I notice that there is no Z-index specified.

             

            I use .animate in my code [$(this).stop().animate({opacity: "0.0"}, '2500');]  but the timings do nothing whereas in your code they do what I expect them to do. What am I doing wrong?  

            • 3. Re: Transition speed
              Nancy O. CommunityMVP

              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.

              • 4. Re: Transition speed
                harvey waxman Community Member

                Perfect!  You're a treasure.

                 

                If you have time:

                 

                1. How did you lock the (image) layers together?   Does the order of creation determine which is on top? 

                2. The layers panel shows 2 layers but no z-index or "eye" visibility.  When I changed the order in the list, the z-index appeared, same for both, but the taper remains on top.  I don't understand.

                3. The opacity starts at 0.25?  Why not 1?  It seems to make no difference.

                 

                The effect is just what I had envisioned.  Using click instead of hover does what I'd expect it to do. Is there a good resource to learn all these commands/options?

                 

                Thanks again.

                • 5. Re: Transition speed
                  Nancy O. CommunityMVP

                  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.

                  • 6. Re: Transition speed
                    harvey waxman Community Member

                    Nancy O. wrote:

                     

                    Glad it works for you. 

                     

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

                     

                    When I tried that on my page they wouldn't line up. I had to nudge one until it looked right in the browser

                     

                    #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({

                     

                    They appear locked, even moving together when I drag them.  How does that happen?  The layer dialogue box shows two layers but the code has the images in one div.

                     

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

                     

                    It looks the same either way.

                     

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

                    http://docs.jquery.com/Main_Page

                     

                    Thanks again

                    Nancy O.