www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hi Newbie Q on jquery how-to

  1. #1
    Join Date
    Dec 2011
    Posts
    1

    Hi Newbie Q on jquery how-to

    Hi,

    I tried using the forum at jquery.com - but it was impossible to register - kept ending up at the Zoho site?

    Anyway I am happy to have found this site - which I think does offer help for jquery?

    What I would like to accomplish is have each header on my site display a different image that fades In.

    So (for testing purposes I am only using 2 images) in the html I assigned a class for each img (headerOne and headerTwo)

    My problem is in telling jquery to find the css for headerOne and Two and apply the css before running the fadeIn on the image.

    Here is the (pitiful) code I have so far:

    <script type="text/javascript" src="_js/jquery-1.7.1.min.js"></script>
    <script>
    $(function() {
    $('.headerOne').fadeIn(8000);
    });
    </script>
    </head>

    <body>
    <div id="wrapper">
    <div id="header">
    <div id="headerImage" class="headerOne"></div>
    </div>

    and the CSS

    .headerOne {
    background: url(../_images/stop_McGinty.png) no-repeat;
    }
    .headerTwo {
    background: url(../_images/aao.png);
    }


    I know this is simple but I am so inexperienced in programming and jquery.

    Really appreciate any help.

    Thank You

    Tony

  2. #2
    Join Date
    Oct 2011
    Posts
    8
    I believe you're looking for something like..

    Code:
    $("#headerImage").fadeOut().removeClass("headerOne").addClass(headerTwo").fadeIn();

  3. #3
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    Quote Originally Posted by SamB123 View Post
    I believe you're looking for something like..

    Code:
    $("#headerImage").fadeOut().removeClass("headerOne").addClass(headerTwo").fadeIn();
    not quite. you need to use a callback

    Code:
    $("#headerImage").fadeOut(function(){
    $("#headerImage").removeClass("headerOne").addClass("headerTwo").fadeIn();
    });
    or
    Code:
    $("#headerImage").fadeOut().removeClass("headerOne").addClass("headerTwo",function(){
    $(this).fadeIn();
    });
    Last edited by DanInMA; 12-11-2011 at 11:51 AM.

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Most likely you don't want to fadeOut completely as that will set the element to display: none. Also, you don't need to get headerImage again in the callback, use $(this). I would say this is probably better:

    Code:
    $("#headerImage").fadeTo(300,0,function(){
    $(this).removeClass("headerOne").addClass("headerTwo").fadeTo(300,1);
    });
    The speed of the transitions is given by 300 in the code above (300ms), if you want to make it faster or slower than change that number. The second number in the fadeTo function is the opacity that it's being faded to.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles