Develop Reference

how to execute jquery function after one another (and few more questions)

To explain the situation ,I am using both jquery and animate.css combined in order to bring about some animation part that i want to apply to my website.
http://lifeto.cafe24.com/xe/
I have a couple of questions in this post, and it needs fairly thorough understanding of the site that i have built.
Fist, If you go to the webstie I linked above and click on the menu that says '공지사항' on the bottom, an iframe src gets triggered by jquery attr.
And if you click on any of the image you can see on the board after that, the board content (#window_frame) slidesout to left and the new div (.window_board) slides in from the leftside.
but when you click on the image, notice the content of the board AND the .window_board disappear and appear AT THE SAME TIME.
what i want to achieve here is to have the #window_frame slides out first, and THEN, after it is done, have .window_board slides in.
and SECONDLY, when i click on the menu button that says '공지사항' from the point when the .window_board is still opened, i want the .window_board to slides back in, and have the content(#window_frame) comes back out.
I wonder if it's possible to achieve this only by using simple jquery events, as it needs to calculate when the #window_frame is opened or not.
here is the complete js for the board (iframe)
jQuery(document).ready(function(){
jQuery(document).on('click', '.item', function() {
jQuery('.loader_container', parent.document.body).show();
var url = jQuery(this).data('url');
jQuery('#window_board', parent.document.body).attr('src', 'url',200);
jQuery('#window_frame', parent.document.body).addClass('animated slideOutLeft');
jQuery('.window_board', parent.document.body).addClass('open animated slideInLeft');
jQuery('.loader_container', parent.document.body).hide();
});
});
and the main menu:
<a onclick="jQuery('#window_frame').attr('src',
'http://lifeto.cafe24.com{$val1['href']}',200),
jQuery('#window_frame').removeClass('animated slideOutLeft')" class="menu_a">MENU</a>

Your question not clear so much, but if i consider only your main question:
how to execute jquery function after one another
you can use promise().done() or .when() to execute a jquery function after another.
Example:
$('div').click(function(){
$(this).addClass('blah').promise().done(function(){
alert('class added!');
});
});
You can read more about it:
https://api.jquery.com/promise/

shorthand for .load() ajax links with loader

here's the structure of the code: http://jsfiddle.net/ss1ef7sq/
although it's not really working at js fiddle but the code itself is working as i've tested it locally through firefox.
this is where i've based this on: http://html.net/tutorials/javascript/lesson21.php
jquery/ajax:
$('#ep-101').click(function(){$('.main-container').load('link.html #ep101').hide().fadeIn(800);});
$('#ep-102').click(function(){$('.main-container').load('link.html #ep102').hide().fadeIn(800);});
$('#ep-103').click(function(){$('.main-container').load('link.html #ep103').hide().fadeIn(800);});
$('#ep-104').click(function(){$('.main-container').load('link.html #ep104').hide().fadeIn(800);});
$('#ep-105').click(function(){$('.main-container').load('link.html #ep105').hide().fadeIn(800);});
so my question is, is there a way to make it like a shorter code where it can just get the value of those #10ns or assuming that there will be a different page with it's own nest of unique ids without typing them individually? there's still a lot i don't understand with ajax so i'd appreciate it if anyone can help & explain at least the gist of it as well.
i've looked around online but i'm really stuck. i also at least found out that it's possible to add transitions but the way it's coded there is that it will only have the transition for the incoming page & not the one that will be replaced. i also have a prob with page loaders effects but i'll save it for when i'm stuck there as well.
thanks in advance. =)

Use classes instead of id's. Set href attribute which you want to load on click and access it via $(this).attr('href').
<a class="load-me" href="link1.html">link 1</a>
<a class="load-me" href="link2.html">link 2</a>
...
Script:
$('.load-me').click(function(e){
e.preventDefault();
$('.main-container').hide().load($(this).attr('href'), function() {
// ...
$(this).fadeIn(800);
})
});
JSFiddle
If you need the load to wait container hiding animation, you could make it other way.
$('.load-me').click(function(e){
e.preventDefault();
// get the url from clicked anchor tag
var url = $(this).attr('href');
// fade out the container and wait for animation complete
$('.main-container').fadeOut(200, /* animation complete callback: */ function(){
// container is hidden, load content:
$(this).load(url, /* load complete callback: */ function() {
// content is loaded, show container up
$(this).slideDown(200);
});
});
});
JSFiddle

Loading second div behind first div. then hiding first div

Current Implementation:
two divs at same place, div1 display:block, div2 display:none
on tab click, Jquery hides one in 2000ms and shows other div.
Problem:
I dont want user to feel like 2nd div loaded after tab clicked.
I want user to feel that second div was there when first div disapeared.
Current Code:
div1.hide('fade', 2000, function() {
div2.show();
});
I need something like:
div2.show(); //behind div1
div1.hide('fade', 2000);
but this shows both divs on screen for 2 seconds which I dont want to.
Please help.

You need to code something like this
$(document).ready(function(e) {
$(".tab2").on("click",function(){
$(".div2").stop(true,true).slideUp(function(){
$(".div1").stop(true,true).slideDown();
});
})
$(".tab1").on("click",function(){
$(".div1").stop(true,true).slideUp(function(){
$(".div2").stop(true,true).slideDown();
});
})
});
Put your class or id name on which you want to click instead of .tab
Here is demo of full tab pane: fiddle

You can use stop() to block the queueing of animations, like so:
$('#click').click(function() {
$("#div1").stop().fadeTo(2000, 0);
$("#div2").stop().fadeTo(2000, 1);
});
Here's a jsFiddle

What you are looking for sounds like 2 div's behind each other, using z-index. You just put them in the same place, give the one in the back a lower z-index and then fadeOut the top one. This way the second one will actually be there already and you don't need the show() or fadeIn(). Example here

Here's a little bit sexier way than loading the second div later. stack the divs, then fade out the top one and hide it with the animation callback when it's done. (or, use fadeOut as BenMann suggests for the same result.)
Example fiddle
<div id='container'>
<div id='divFront'>some content on top, click for other content</div>
<div id='divBack'><br />some other content underneath</div>
</div>
$('#divFront').click(function(){
$('#divFront').animate({"opacity":"0"}, 2000, "swing", function(){
$('#divFront').hide();
});
});

thank you for your support sir, I have aceived it by using the comments of everyone. Have a look bro http://jsfiddle.net/bhailogee/CA7Bu/3 thanks
$(document).ready(function(e) {
$(".tab1").on("click",function(){
prepare($(".div2"),$(".div1"));
$(".div1").hide('slide', 2000,function(){
clean($(".div2"),$(".div1"));
$(".div2").show();
});
})
$(".tab2").on("click",function(){
prepare($(".div1"),$(".div2"));
$(".div2").hide('slide', 2000,function(){
clean($(".div1"),$(".div2"));
$(".div1").show();
});
})
function prepare(showdiv,hidediv){
showdiv.css('position','absolute');
hidediv.css('position','absolute');
showdiv.css('z-index','1');
hidediv.css('z-index','2');
showdiv.css('display','block');
hidediv.css('display','block');
}
function clean(showdiv,hidediv){
showdiv.css('z-index', '');
hidediv.css('z-index', '');
}
});

fadeIn as callback function after fadeOut doenst work as expected

In my HTML a#navInnerMapR and a#navInnerMapL are contained within div#navTwo.
The following code is within a function. When called, I need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR.
$('div#navTwo a').fadeOut(200, function() {
$('a#navInnerMapR').delay(100).fadeIn(200);
});
The code fades out the links but doesn't fade anything in. I thought that they delay would only start once the fadeOut finishes, however changing the delay value to 1000 makes it sometimes work but its very buggy. Thanks
UPDATE Here is a fiddle showing that the hidden link starts to be shown before the visible is hidden: http://jsfiddle.net/jamesbrighton/d9QKr/5/
UPDATE Apologies, my question doesnt include the full details of what I need to achieve. I simplified it as I thought I just had some sort of sytax issus that could be easily fixed.
div#navTwo actually contains 3 links. At any point (other than the delay before animations run) only 1 link is visible. I need to be able to call a function that will hide either of the other 2 links that are being shown, and then show a#navInnerMapR.
Different events will call this function, so either of the 2 links that arn't a#navInnerMapR may be visible. Thanks
UPDATE I think this fiddle illustrates the issue. Ive created 2 div.nav's to illustrate different states. Ive hidden different links with inline CSS in each one. JavaScript will be showing and hiding the links in my div repeatedly, so the same div will look like each example at different times.
Ive created 2 triggers to illustrate that different events will need to call the function. When you click on a trigger you can see the issue with both examples. The visible divs are not hidden before the a.one is shown. Thanks for your patience!
http://jsfiddle.net/jamesbrighton/dYvMS/24/
Interesting point, if I change $('.nav a.one').fadeIn(1000); to an alert, the alert fires multiple times! No idea why this would be the case!

Edit: Updated answer based on your below comment,
Yes this works as I need, but im not sure it will work for my actual
page. Sorry for my question not being detailed enough. The code
example I gave is simplified. In the actual page their are 3 links
within div#navTwo, at any time only one of them will be visible. I
need to be able to call a function that hides any links and shows a
specific one, but either one of the other 2 links in div#navTwo may be
visible. Thanks
DEMO
HTML: Added class to all links inside navTwo
<div id="navTwo">
Right
Left
Middle
Upper
Lower
</div>
JS:
$('.links').click(function() {
showHide($(this));
});
function showHide($this) {
$this.fadeOut(1000, function() {
$('#navTwo a').not($this).delay(1000).fadeIn(1000);
});
}
I think I understood what you need. Try below DEMO and let me know if that is what you want,
DEMO
$('#navInnerMapR').click(function() {
runMeR($(this));
});
$('#navInnerMapL').click(function() {
runMeL($(this));
});
function runMeR($this) {
$this.fadeOut(1000, function() {
$('a#navInnerMapL').delay(1000).fadeIn(1000);
});
}
function runMeL($this) {
$this.fadeOut(1000, function() {
$('a#navInnerMapR').delay(1000).fadeIn(1000);
});
}

As you said, You need the function to fadeOut any visible links in div#navTwo, pause for a moment, and then fadeIn a#navInnerMapR (not other links, only a#navInnerMapR).
$('#navTwo a').click(function(e) {
$(this).parent().children().each(function(i){
$(this).fadeOut('slow', function(){
$('a#navInnerMapR').delay(1000).fadeIn(1000);
});
});
});​
A fiddle is here.

Basic jQuery problems

I am struggling with jQuery for a long time now. It is very powerful and there are lot of great things we can do with jQuery.
My problem is that I use a lot of jQuery features at the same time. E.g. I have a site that displays items, 12 items per page and I can paginate through the pages using jQuery. On the same page I implemented a thumpsUp button that uses jQuery too.
The more jQuery features I use, the harder it gets to arrange them properly. E.g.:
$(document).ready(function() {
$(".cornerize").corner("5px"); //cornerize links
$('a#verd').live('click', exSite); //open iframe
$("a.tp").live('click', thumpsUp); //thumps up
$("a#next").click(getProgramms); //next page
$("a#previous").click(getProgramms); //previous page
//for the current page reload the content
$("a#page").each(function() {
$(this).click(getProgramms);
});
//this isn't working...
$('.smallerpost').live('click', alert('test'));
});
Have a look at the last code line. I want to perform an alert when the div element is clicked. Instead of doing so the page shows me the alert when I refresh the page. A click on the div has no effect.
What am I doing wrong? What would be a strategy here to have clean and working jQuery?

Change that line to
$('.smallerpost').live('click', function () {
alert('test');
});
and while you're there...
$("a#page").each(function() {
$(this).click(getProgramms);
});
has exactly the same effect as:
$('a#page').click(getProgramms);
... but technically there should be only one element with id='page' anyway

Your code $('.smallerpost').live('click', alert('test')); calls the alert immediately and passes its return value into the live function as the second parameter. What you want to pass there is a function to call, so you want:
$('.smallerpost').live('click', function() {
alert('test');
});
or
$('.smallerpost').live('click', handleSmallerPostClick);
function handleSmallerPostClick() {
alert('test');
}
...depending on how you structure your code.