/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] jQuery: html() performing before hide() when called after it.

Copy linkTweet thisAlerts:
May 24.2010

Hi!
I have a big problem here.
Please, see the simple example:
[url]http://livescore-bg.net/srpski.html[/url]
I want when I change some of the menus 3 thing to happen in the folowing order:
1) Old flag to hide()
2) New flag to be on its place, IN THE MOMENT THAT this is not visible, I mean, in the moment in which the hide() action will already be performed.
3) New flag to fadeIn()

As you can see after some tests on the url shown, FIRST it replaces the flag, and after that it hides the old and shows the new one.
Here is my first version of the code:

[CODE]
 $(“.zastavaholder”).each(function(){
$(this).hide(1000);
});
$(“#zastava1”).html(newflag1);
$(“#zastava2”).html(newflag2);
$(“.zastavaholder”).each(function(){
$(this).fadeIn(1800);
});
[/CODE]

and here is my even stranger current version:

[CODE]
 $(“.zastavaholder”).each(function(){
$(this).hide(1000);
});

$(“.zastavaholder”).each(function(){
$(this).fadeIn(1800);
});
$(“#zastava1”).html(newflag1);
$(“#zastava2”).html(newflag2);[/CODE]

Ok. Thats my question. Why it first does the html(), even if I put it in the end of the function? And how to get what I want in the desired order of events. PLease, help!!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@pastet89authorMay 24.2010 — Anybody??
Copy linkTweet thisAlerts:
@BIOSTALLMay 25.2010 — Try using the callback functionality of the jQuery hide()/fadeout() functions, otherwise everything kind of happens all at once.

Hope that helps ?
Copy linkTweet thisAlerts:
@aj_nscMay 26.2010 — Exactly what Biostall said. Perhaps to be a little more direct:

<i>
</i> $(".zastavaholder").each(function(){
$(this).hide(1000,function() {
if($(this).attr('id') == 'zastava1') {
$(this).html(newflag1);
} else {
$(this).html(newflag2);
}
$(this).fadeIn(1800);
});
});
Copy linkTweet thisAlerts:
@sohguanhMay 26.2010 — and here is my even stranger current version:
[CODE]
 $(".zastavaholder").each(function(){
$(this).hide(1000);
});

$(".zastavaholder").each(function(){
$(this).fadeIn(1800);
});
$("#zastava1").html(newflag1);
$("#zastava2").html(newflag2);[/CODE]

Ok. Thats my question. Why it first does the html(), even if I put it in the end of the function? And how to get what I want in the desired order of events. PLease, help!![/QUOTE]

To use jQuery effects and non-effects methods correctly, it would be good to read through some jQuery books or reference materials from the website.

Basically, to ensure order of events, you need to use chaining method.

E.g

$(this)

.hide(1000)

.fadeIn(1800);

Above will ensure hide goes first followed by fadeIn. There is an exception is when it is for non-effect methods like your case html, you need to do one more step.

E.g

$(this)

.hide(1000)

.queue(function(){

//put your non-effects method in here

dequeue();

})

.fadeIn(1800);

Above will ensure your non-effect methods will be queued for execution in the desired order you want.
Copy linkTweet thisAlerts:
@pastet89authorMay 26.2010 — actually it appeared to be just:

[CODE]
$(this).hide('slow', function(){
$(this).html(newflag1).fadeIn(1000)
});
[/CODE]
×

Success!

Help @pastet89 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,
)...