We Keep Coding

How can I get an effect to fade out before another fades in, with an "if/else" statement in jQuery?

I have been trying different things for a while now, but I'm still unable to get one DIV to fade out, and have another one fade in. I have searched the site, but I'm still new to jQuery, so I don't understand certain syntax and whatnot.
If someone could explain the easiest way to have my code check to see if a DIV is already in-view (probably with an if statement)--if not, having the DIV selected by the user fade in. If one is already in view, have it fade that DIV out, and fade in the newly selected one.
Thanks, again!

Theres a callback for the fadeIn and fadeOut functions in jQuery, you just need to add the code inside that callback:
$( "#willDisappear" ).fadeOut( "slow", function() {
// #willDisappear is Hidden.
$( "#willAppear" ).fadeIn("slow");
});
Or the other way:
$( "#willAppear" ).fadeIn( "slow", function() {
// #willAppear is Visible now.
$( "#willDisappear" ).fadeOut("slow");
});
Javascript uses events, callbacks are just functions you pass to, in this case fadeIn, to use whenever an event is triggered, in this case when fadeIn is complete.

If i understood correctly, you can use the :visible selector to check the visibility of an element to hide it using fadeOut and show the other element using fadeIn in the callback of fadeOut function.
$('input').click(function(){
if($('#first').is(':visible'))
$('#first').fadeOut('slow',function(){
$('#second').fadeIn('slow');
});
else
$('#second').fadeOut('slow',function(){
$('#first').fadeIn('slow');
});
});
Demo

Javascript on scroll event change css then wait and then rechange

I am trying to change the css on scroll event and it is working.
$(window).scroll(function () {
$(".navcont").css("background-color", "pink")
});
But, when I try to give delay and change it back,
$(window).scroll(function () {
$(".navcont").css("background-color", "pink")
.delay( 5000 )
.css("background-color", "white");
});
It always shows pink color, But I want the white color first then delay and then pink color.
Can some one help me with this!
thanks in advance

Try using only setTimeout, without animate:
$(window).scroll(function () {
$(".navcont").css("background-color", "pink");
setTimeout(function() {$(".navcont").css("background-color", "white")}, 8000);
});
Here on jsFiddle.

First thing I think of is using .animate() to get the callback, then using setTimeout to delay the return to CSS:
$(window).scroll(function(){
$('.navcont').animate({backgroundColor:'pink'},1,function(){
var $this = $(this);
setTimeout(function(){
$this.css({backgroundColor:'white'});
},80000);
});
});
The 1 means the animation is 1 millisecond long, which is invisible to the eye but I've had issue with using zero so I just add a value to satisfy the callback.

The delay() function works only on a jQuery effects queue, not on all functions. The effects are such as fadeIn, slideUp, etc. There is a custom effect generator called animate() and you can use that with delay(). However, you cannot animate non-numeric properties like background-color. So here is a trick -
$(window).scroll(function () {
$(".navcont")
.animate({dummyProperty: "dummyValue"},1,"linear",function(){
$(this).css("background-color","pink")
})
.delay( 80000 )
.animate({dummyProperty: "dummyValue"},1,"linear",function(){
$(this).css("background-color","blue")
});
});
The first argument for animate is a css property you wish to animate. Since background-color cannot be animated, we use a dummy property here (you can use anything here, doesn't make any difference).
The second argument is the time of animation. We just use 1 millisecond here because we set the real delay using the delay() function.
The third argument is the easing (doesn't matter in this case).
The fourth argument is a callback function with 'this' pointing to the selected HTML element. So we change it's background-color here.

How do I make slides to slide by themself?

So I have this problem. I have a page that has slides which doesn't slide by them self and i want that they'd slide. Here is the code http://jsfiddle.net/tUUPN/3/
$(document).ready(function () {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visibility", "visible");
$("#slideshow-nav a[href=#farm1]").addClass("active");
$("#slideshow-nav").localScroll({
target: '#slideshow',
axis: 'x'
});
$("#slideshow-nav a").click(function () {
$("#slideshow-nav a").removeClass("active");
$(this).addClass("active");
});
});
EDIT
I updated jsfidde http://jsfiddle.net/tUUPN/10/ (included jquery files at External Resources tab on the left)

I would recommend using jQuery's Animate() method to produce a sliding effect. You can read up on the API and examples on that same page.
You can still apply your click functions and such, but you really need animate as a weapon of choice when moving / sliding objects.

Create a method to go to the next slide then call that method in setInterval. The number of milliseconds determines how often it fires. Use clearInterval if u want it to stop.

Problems with removing elements in jQuery

I am attempting to remove an object from a page with jQuery. I also want to animate the removal. The goal is to make the element fadeOut(), wait a second, then remove(). But it seems to refuse to wait to remove the element, even when I use it in a setTimeout() function. How can I make an element fadeOut(), and then remove() it?
$("button").click(function() {
$(this).fadeOut();
setTimeout(function() { $(this).remove();}, 1000);
});

Read manual carefully:
http://api.jquery.com/fadeOut/
The fadeOut() method has a callback that is invoked after the fadeOut completes. To use it:
$("button").click(function() {
$(this).fadeOut(function() { $(this).remove();});
});
There should be no reason to wait one second after the fadeOut completes, before removing the element, because the element will be invisible when it is removed.

In your timeout function, this isn't what you think it is - it's actually the global window object.
In any event (no pun intended) you should use a "completion callback":
$("button").click(function() {
$(this).fadeOut('slow', function() {
$(this).remove();
});
});
Never, ever, mix setTimeout and the animation queue. It's fine to interleave the two, i.e having a completion callback start a timer, or having a timer starting an animation, but it's never OK to assume that you can start both a 1000ms animation and a 1000ms timer and have them complete at the same time.
EDIT fixed code - no need for self in a completion callback, I was still thinking about setTimeout and this when I wrote that!

$('button').click(function(){
$(this).fadeOut(function(){$(this).remove()});
});​
DEMO

Why not just use the callback of fadeout?
$("button").click(function() {
$(this).fadeOut(function(){$(this).remove();});
});

try this one, maybe it helps:
$("button").click(function() {
(function(that) {
that.fadeOut();
setTimeout(function() {
that.remove();
}, 1000);
})($(this));
});

if the hide() jquery animate function set after animate(),it doesn't work?

First I have a animate a iframe which id is "test"
<iframe id="test" src=""></iframe>
then I want animate it and hide it ,make a close effect like in MacOS:
$('#test').animate({
'width':0,
'height':0,
'top':$('input').offset().top,
'left':$('input').offset().left
},function(){
//$(this).hide();
}).hide();
but it seems the iframe can not be hide.However,if I write it in the callback function that in animate,which is the annotated code above.It could work again.
Here is online case
So I wonder why the hide() after animate() doesn't work?Do I miss something ?

To answer your question, the call to .hide() is performed immediately after the call to .animate(), so the .hide() invocation actually takes place before the animation completes, (.animate() runs asynchronously) - this is why jQuery provides the callback function to you so you can be notified of when the animation completes.
$('#test').animate({
'width':0,
'height':0,
'top':$('input').offset().top,
'left':$('input').offset().left
}, function(){
$("#test").hide();
});
Saved this for you on jsFiddle too

Set opacity to hide and it will work:
$('#mask').click(function () {
$('#mask').fadeOut(500);
$('#test').animate({
opacity: 'hide',
'top':$('input').offset().top,
'left':$('input').offset().left,
},3000);
});