Hi Newbie Q on jquery how-to

**General_T** · 12-10-2011 10:21 AM

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

**SamB123** · 12-10-2011 06:38 PM

I believe you're looking for something like..

Code:

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

**DanInMA** · 12-11-2011 11:47 AM

Originally Posted by SamB123

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();
});

**aj_nsc** · 12-11-2011 12:53 PM

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.

Thread: Hi Newbie Q on jquery how-to

Thread Tools

Display

Hi Newbie Q on jquery how-to

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions