We Keep Coding

jquery if is not working

I have this code.. the problem is that the CSS is not applying in both div's but only in the first one #main-wrapper
I have the same code but this time in a button press and its working, but with the if statement only the single works.. im not sure if the codes is somewhere wrong please help ... i tried to put the script in the end of the body tag but still nothing
if (window.location.href.indexOf("#expand") > -1) {
$( "#main-wrapper" ).animate({ 'width':'984px' }, 'slow');
$( "#sidebar-wrapper" ).animate({ 'display':'none' }, 'slow');
}

You can't animate 'display':'none'.
You could animate the opacity:
$( "#sidebar-wrapper" ).animate({'opacity':0}, 'slow', function(){
$(this).remove();
});
or, as suggested by Me.Name in comments:
$( "#sidebar-wrapper" ).fadeOut('slow');
or use slideUp:
$( "#sidebar-wrapper" ).slideUp();

Making a menu with toggle which can be animated using the top property

I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>

Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.

Multiple opacity transitions using callbacks

I am trying to create an image transition aka slideshow, like they have on:
www.teamgeek.co.za/ - the first image on the left you see!, it works by just having a script which changes the opacity of the images.
I have started to try and make something like this, here is my progress:
http://jsfiddle.net/pYECC/1/
$( "#change" ).click(function() {
$( "#image1" ).fadeTo( "slow" , 0, function() {
$("#image2").fadeTo("slow" , 1, function(){
$("#image3").fadeTo("slow", 1, function(){
});
});
});
});
Now my problem is that, I need the transition to be slower then "slow", because it just doesn't feel as slow and "correct" as the one seen on teamgeek's site.

Slower than slow - http://jsfiddle.net/pYECC/2/
$("#change").click(function() {
$("#image1").fadeTo(5000 , 0, function() {
$("#image2").fadeTo(5000 , 1, function(){
$("#image3").fadeTo(5000, 1, function(){
});
});
});
});

How to easeout this animation

I need to animate this animation during exact time. How to easing this animation.
$( "#slice1" ).click(function() {
$("#post1").toggleClass("post"));
});

If you are talking about jquery UI you can use a second optional parameter to set the duration:
$(function() {
$( "#button" ).click(function() {
$( "#effect" ).toggleClass( "newClass", 1000 );
return false;
});
});
DEMO
Related question here

Replacing an element by sliding it out and a new one in

basically, I want to show a table, and when the user clicks a link, I want the table to slide out to the left and another table to slide in from the right to the position where the original table was.
I've come so far (http://jsfiddle.net/JqkyA/4/):
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 } );
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
Problem is, while the second table is sliding in, its x-position is correct but it is always displayed below the original table. I don't want that - I want the second table to slide in at the exact same y-position as the original table.
Any ideas on how to achieve this?
EDIT:
To be clear, I would like the new table to slide in on the same y-coordinate as the old table, but I still want the old table to be shown during slide-out. I also would like to have the new table slide in right next to the old one (no 'pause' between the tables as wm.p1us suggested).
Thanks for any help.

I think you should go with a different approach.
Instead of sliding the 2 tables just slide their container using negative margin and then hide the first table using the complete callback.
I also added display: inline-block to both tables.
Something like this:
$(".grids").animate({'margin-left': -110 }, 5000, function () {
$('table.grid-1').hide();
$(this).css("margin-left", 0);
});
See this working demo

$( function() {
$( "a" ).click( function() {
$( "table.grid-1" ).css({'position': 'absolute'});
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 });
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );

I've forked your JSFiddle
I added
<div class="inner">
as an inner wrapper and floated the tables to the left. animation is done by changing margin-left of the first table.
This will work as you wanted - the first table is still visible when the second one comes in..

Try this,
$( function() {
$( "a" ).click( function() {
if($( "table.grid-1" ).css('display') != 'none')
{
$( "table.grid-1" ).hide();
}
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );
Let me know is it usefull?.