Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8

Thread: Element Fade In

  1. #1
    Member
    Join Date
    Aug 2009
    Posts
    36
    Member #
    19700
    On my homepage, i have 4 elements I need to have faded in one after the other. The 1st is in an image, then an equal sign (text in a DIV box), then another image, and then on top of that a DIV box w/ the text of the titles of the two images. I need each of those elements to fade in, one after the other, so image, equal sign, image, then the DIV box w/ the titles. If anyone knows JS that could time the loadings and have a fade in effect that would be amazing.

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Are you well accustomed to Javascript? If so, the major JS libraries have animations for this kind of purpose. What you're looking for can also be called a slideshow, so check out plugins for slideshows.

    I would personally recommend jQuery for this purpose. It would be doable manually; stack them with CSS (z-index), and fade each one out, using callbacks to trigger the next fade effects.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Member
    Join Date
    Aug 2009
    Posts
    36
    Member #
    19700
    i actually never have touched JS code, the only ones I implement are pre-coded. The thing with the slideshow is the elements would fade in, but not out. Could you get me started in the right direction? Even the JQuery code and I can customize it

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    http://www.switchonthecode.com/tutor...fade-animation


    this has code you can customise. after you read the tutorial, start with the parts that make no sense, if all then start with all. plug them into google and read. this will help you pull it apart and figure out what parts are doing what. once you are struggling to keep your eye lids open and drewling, take a break, then have a go at it

    while($get_it !== true){ continue; }

  6. #5
    Member
    Join Date
    Aug 2009
    Posts
    36
    Member #
    19700
    Amazing code, however I still have a bit of trouble. I have the image and its title fade in and now I need the other image and its title to fade in. So i made a sepearate JS file, wrapped the second image in a DIV w/ the id being fade2 as opposed to fade, and in the second JS file i changed all the functions/elements to fade2. However, for some reason the second JS file control both images and their titles, even though they are under different names. You can see it on my homepage, www.n e a s t s o l a r.com (no spaces). The second JS file (SOTC-Fade_Example2.js) is clearly controlling both because when the fade time is changed it does both. The two JS files are located at www.n e a s t s o l a r.com/config

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Thanks Dorky, another site bookmarked!

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i'm not a javascript expert, sorry. maybe someone else will chime in. keep checking back.

    while($get_it !== true){ continue; }

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    You need not do it the way you've done it. Which is to say, there's no need to define two files.

    The reason you're seeing what you're seeing is that both files define the TimeToFade variable in a global scope. So, the second definition is overriding the first one. The best way to handle this is to just pass the TimeToFade variable to the function.

    If you rather insist on not using a library function (jQuery would let you do this with a single line of code and one included library, albeit for a little bit more downloaded heft), here's a better form of the above JS function:

    Code:
    (function() {
      var FADING_IN = 1,
          FADING_OUT = -1,
          FADED_IN = 2,
          FADED_OUT = -2;
      var ANIMATION_STEP = 33;
    
      window.fade = function(eid, fadeTime)
        {
          var element = document.getElementById(eid);
          if (element == null)
            return;
           
          if (element.fadeState == null) {
            if (element.style.opacity == null
                || element.style.opacity == ''
                || element.style.opacity == '1')
            {
              element.fadeState = FADED_OUT;
            }
            else
            {
              element.fadeState = FADED_IN;
            }
          }
           
          if (element.fadeState == FADING_IN || element.fadeState == FADING_OUT)
          {
            element.fadeState = element.fadeState == FADING_IN ? FADING_OUT : FADING_IN;
            element.fadeTimeLeft = fadeTime - element.fadeTimeLeft;
          }
          else
          {
            element.fadeState = element.fadeState == FADED_IN ? FADING_OUT : FADING_IN;
            element.fadeTimeLeft = fadeTime;
            element.style.display = 'block';
    
            var curTick = new Date().getTime();
            setTimeout(function() { animateFade(timeNow, element, fadeTime); }, ANIMATION_STEP);
          }
        }
    
      function animateFade(lastTick, element, fadeTime)
      {
        var curTick = new Date().getTime();
        var elapsedTicks = curTick - lastTick;
       
        if(element.fadeTimeLeft <= elapsedTicks)
        {
          element.style.display = element.fadeState == FADING_IN ? 'block' : 'none';
          element.style.opacity = element.FadeState == FADING_IN ? '1' : '0';
            element.style.filter = 'alpha(opacity = ' + (element.fadeState == FADING_IN ? '1' : '0') + ')';
            element.fadeState = element.fadeState == FADING_IN ? FADED_IN : FADED_OUT;
            return;
          }
         
          element.fadeTimeLeft -= elapsedTicks;
          var newOpVal = element.fadeTimeLeft / fadeTime;
          if (element.fadeState == 1)
            newOpVal = 1 - newOpVal;
        
          newOpVal = newOpVal * 1;
          element.style.opacity = newOpVal;
          element.style.filter = 'alpha(opacity = ' + (newOpVal * 100) + ')';
         
          setTimeout(function() { animateFade(timeNow, element, fadeTime); }, ANIMATION_STEP);
       }
    })();
    No guarantee that this'll work, but it should. Call it by calling [minicode]fade('fadeBlock', 6000); fade('fadeBlock2', 2000);[/minicode]


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:37 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com