SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making something fade when document is ready

    Basically as the title mentions, I want to make an HTML element (image) fade in and out when the page loads, I'm a beginner developer so bear with me, and I know I'm suppose to be using the .fadeIn() and .fadeOut() effect. (I'm wanting this to be done with jQuery)

  2. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Demo: http://jsfiddle.net/OMGCarlos/BvN9A/

    Everything that is put inside of:
    Code:
    $(function(){
      //...stuff...
    });
    Is only run after the document is ready, and in fact, is a shorthand for writing: $(document).ready(function(){});

    Ok. So now when you want to fade an element, you "find" that element using the jQuery selector: $('elementID');
    If you have an element <img id="smiley" src="link" /> then you grab that element with: $('#smiley');

    Notice that you use CSS selectors, ie $('.class'), $('#id'), $('element')

    Next, to actually fade the element. The Docs explain all the variations, but the simplest way is to do:
    Code:
    $(function(){
       $('#smiley').fadeOut(1000);
    });
    which would fade the smiley out in 1 second (1000 = 1 second)

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What would be the function to make it fade in & out over and over?

  4. #4
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function loopAnim(obj, speed){
       obj.fadeIn(speed, function(){
          loopAnim($(this), speed);
       });
    }
    
    loopAnim($('#smiley'), 1000);

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, but i can't quite follow your example (developer newbie) but here is the code that I'm working with(perhaps you can modify it a bit):
    Code:
    $(window).load(function(){
       $('.glow').fadeOut(500);
       $('.glow').fadeIn(500);
    });
    the glow class is the image I'm working with.

  6. #6
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You're executing two opposite animation functions simultaneously, so it's going to seem as though it's not working. Try this:
    Code:
    $(function(){
      $('.glow').fadeOut(500, function(){
        $(this).fadeIn(500);
      });
    });
    Check out: http://api.jquery.com/fadeOut/

    By using a callback function (which gets executed AFTER the animation is finished), your able to "string" animations together.

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it did the same thing? Was I suppose to keep it within the <body>? or move it to <head>?

  8. #8
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    With very rare exceptions, ALL your javascript should go at the bottom of the page, just before </body>

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how would I get the .fadeIn to go back to the .fadeOut effect to make it loop over and over? cause unless I'm doing something wrong (using your code directly though) it's not looping at all...

  10. #10
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    DEMO: http://jsfiddle.net/OMGCarlos/pfE7u/1/

    I made this demo for you. It should demonstrate everything I've tried to explain. You have to do what is called "recursion", when a function calls itself. It's a special type of loop.

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much! but now there is another problem... after a few seconds of looping, it disappears... like the css for the element style changes to display: none;

    Why is that?

  12. #12
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That's strange. What browser are you on? I accidentally left that tab open and it's been running fine ever since. Are you using the same code? If not post what you've got.

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might've misunderstood me (maybe); the jsFiddle code is still "blinking" but the code on my website is the one that disappears, and the only thing that I really changed was the HTML element; as it's no longer a DIV but an image, oh and I'm using Google Chrome.

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind it's working now for some reason, but thank you for all the help, i greatly appreciate it!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •