Develop Reference

Javascript Fade

$(window).load(function() {
$(".screenLoading").fadeOut('slow');
})
setInterval("loadCont()", 500);
//Loaded
function loadCont(){
$('.container').fadeIn('slow');
return;
}
function loadLogin() {
$('.container').fadeOut('slow', function() {
$('.log').fadeIn('slow');
});
}
I have the javscript code above and am trying to mimic the effect at http://orinukas.com/SoduBendrija/ .
When I click on the right upper link named 'Nariams', the content with headings and paragraph should fade out and the Sign Up form should fade in.
When I click on that link, content fades, sign up form fades in and content fades in too.
I don't want content to fade in.

I have gone through the code which you pasted in http://pastebin.com/gQC5MBWL .
i found one issue in this you are using
setInterval("loadCont()", 500);
//Loaded
function loadCont(){
$('.container').fadeIn('slow');
return;
}
setInterval is calling itself again and again(this will show the content again if you will hide it) so remove this or use setTimeout instead of using setInterval.
Thanks

Replace the below code with you loadLogin function. This should work as wanted.
function loadLogin() {
$('.container').fadeOut('slow');
$('.log').fadeIn('slow');
}

Login slider with jQuery issues

I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!

Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.

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', '');
}
});

How to add fade effect to a JS id

I have an image and a button, whenever I press the button the image disappears. So I'd like to make it by a fade effect. Something like this:
#hide{-webkit-transition: all 1s ease-in-out;}
Here is the demo: http://jsfiddle.net/5wBuV/4/

In jQuery all you have to do is:
$("#hide").fadeOut("slow"); //or fast, or specific speed in milliseconds
//you can even throw a callback function if you need to
Or you can keep the javascript you had:
document.getElementById("hide").style.visibility = "hidden"; //or display = "none";
http://jsfiddle.net/5wBuV/5/ updated your fiddle

Use some JS:
$('#hide').fadeOut('slow');
If you want more advanced way, see more in Jquery Animate
For animate effect, you can google "jquery easing"

Using jQuery fadeOut():
$("#clickedButton").click( function() {
$('#hide').fadeOut('1000');
});
FIDDLE HERE

Hide Menu using jQuery

Im new to jQuery and need a litte help.
I have created a nav menu that I want to completely disappear upwards after "3 seconds" once a user lands on the page. From this an arrow will be in its place hiding the original nav menu.
When a user clicks on the "arrow" the menu will come back into view and stay there for now 20 seconds.
I have some code in this jsFiddle but it doesn't seem to be doing anything. Can anyone help out there?
http://jsfiddle.net/headex/AsjMz/1/
Any info passed on will be much appreciated.
Cheers

You have to use the correct selectors for your <div/> Elements and supply the MenuOut()
Function as an object, not a string.
$(function() {
setTimeout(MenuOut /*don't supply this parameter as a string*/, 3000); /* 3000 represent 3000 milliseconds, so 3 seconds */
});
function MenuOut() { /* The sample code I put on top */
$('#nav'/*it's an id (#), here you have to use a string*/).slideUp();
}

The error in your live example it's that you're passing the name of the function to the setTimeOut function with "" in other words
you have this
setTimeout("MenuOut", 3000);
Change for this
setTimeout(MenuOut, 3000);
Here's your live example with that change Demo

Instead of using animate, look at using jQuery's slideUp and slideDown.
You'll want to animate like so: setTimeout("$('#nav').slideUp()", 3000);

You had a few errors with your JS.
setTimeout requires a function callback, not a string.
You also used $(nav) instead of $("#nav")
http://jsfiddle.net/AsjMz/9/