2 Replies Latest reply on Jan 7, 2012 10:49 AM by Nancy OShea

    Pause before image fade-ins?

    Brucedude

      I'm very new to DW, so be gentle.  :-)

       

      on my opening web page, I have 2 jpgs that I want to fade into view on load--first one, then the other.

      I can make them both fade in using the fade command in the behaviors menu. BUT--what I really want is for the page to load blank, pause for 2 seconds before the first image fades in, pause again for about 3 seconds before the next image fades into view.  2 images, 2 pauses, 2 fade-ins.  Is there some easy code to create the pauses before the fade-ins for each image?  (I'm working in DW CS5 on a mac)  thx for whatever you can offer.

        • 1. Re: Pause before image fade-ins?
          BenPleysier Adobe Community Professional & MVP

          Adjust the following values to suit

           

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Untitled Document</title>
          <style>
          body {
              width: 980px;
              margin: auto; 
          }
          #logo1, #logo2 {
              display: none; 
          }
          </style>
          </head>
          
          <body>
          <img src="http://shoguncarco.com.au/img/camaro.png" alt="description" name="logo1" id="logo1" />
          <img src="http://shoguncarco.com.au/img/challenger.png" alt="description" name="logo2" id="logo2" />
          
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
          <script type="text/javascript">
          $(function() {
              $('#logo1').fadeIn(3000, function() {
              $(this).delay(1000).fadeOut(2000, function() {});
            });
              $('#logo2').fadeIn(6000, function() {
              $(this).delay(1000).fadeOut(2000, function() {});
            });
          });
          </script>
          </body>
          </html>
          

           

          Gramps

          • 2. Re: Pause before image fade-ins?
            Nancy OShea Adobe Community Professional & MVP

            In addition to what Gramps already gave you, this describes how to fadeIn the page background image with jQuery.  These can all be combined to give you the transition effect(s) you desire.

            http://alt-web.com/DEMOS/fade-in-background.shtml

             

             

            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists 

            http://alt-web.com/