/    Sign up×
Community /Pin to ProfileBookmark

Hi Newbie Q on jquery how-to

Copy linkTweet thisAlerts:
Dec 10.2011

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

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SamB123Dec 11.2011 — I believe you're looking for something like..

[CODE]$("#headerImage").fadeOut().removeClass("headerOne").addClass(headerTwo").fadeIn();[/CODE]

?
Copy linkTweet thisAlerts:
@DanInMADec 11.2011 — I believe you're looking for something like..

[CODE]$("#headerImage").fadeOut().removeClass("headerOne").addClass(headerTwo").fadeIn();[/CODE]

?[/QUOTE]

not quite. you need to use a callback

[CODE]
$("#headerImage").fadeOut(function(){
$("#headerImage").removeClass("headerOne").addClass("headerTwo").fadeIn();
});


[/CODE]

or
[CODE]
$("#headerImage").fadeOut().removeClass("headerOne").addClass("headerTwo",function(){
$(this).fadeIn();
});
[/CODE]
Copy linkTweet thisAlerts:
@aj_nscDec 11.2011 — 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:

<i>
</i>$("#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.
×

Success!

Help @General_T spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...