We Keep Coding

jQuery UI Slide - Move content during animation

I'm building a website which relies on jQuery effects and I have a problem with the jQuery Slide effect.
I'm using that through a toggle function for the moment, but that will change in a later stage.
The fact is that I'm hinding an element when a certain action is executed. When you use the function slide the content beneath those elements moves when the animation is completed to take up the free space which was created with the effect.
The problem is that the content is only moved as soon as the animation is completed. Is there any way to move the content when the animation is still running. With other words, I want to move the content together with the animation, but I don't want to call the slide function on my element that should move with it.
I've created a JSFiddle to demonstrate the problem: http://jsfiddle.net/6Lg9vL8m/6/
Edit: Question update and fiddle
Here's an update to the question, and please see my original updated fiddle.
When you execute the slide effect in jQuery UI, see the bottom example on my fiddle, the box is moved up, and is somewhere placed behind an invisible screen (tough to explain).
With the animate function, see the top example in my fiddle, the area is shrinked, and that's something which I want to avoid. I want to achieve the effect such as 'Slide' does, but the content under the box must move up immediately with the animation, and not after the animation has been completed.
Edit: Reworked the correct answer in a plugin.
Thanks to the answers I've received here, I found the correct code, modified a bit, and created a plugin from it which I'll place here.
The plugin is called 'Curtain' and can be described as rising the requested element as a curtain and thus move it out of the way.
Here's the source code:
(function($) {
$.fn.curtain = function(options, callback) {
var settings = $.extend( {}, $.fn.curtain.defaults, options);
var tabContentsHeight = $(this).height();
$(this).animate({height:0}, settings.duration);
$(this).children().animate({'margin-top':'-' + tabContentsHeight + 'px'}, settings.duration, function() {
$(this).css({"margin-top":0});
if ($.isFunction(callback)) {
callback(this);
}
});
return this; // Allows chaining.
};
$.fn.curtain.defaults = {
duration: 250
};
}(jQuery));
The plugin can be called like this:
element.curtain({ duration: 250 }, function() {
// Callback function goes here.
});
If someone has remarks or a better way to solve this problem, please share it in the comments.

You can do it by using the animate function like this:
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
});
Demo
Updated code to create a "curtain raising" like animation:-
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
$(this).children().animate({"margin-top":"-400px"},2500, function() {
$(this).css({"margin-top":0})
});
});
CSS:
`#square{
overflow:hidden;
}`
Demo 2

This is the effect you wanted?
$('#square').on('click', function(e) {
$(this).animate({height :0},2500 );
});

Changing the order of events in Jquery

So I created some pop-up code that will contain specific information from each link clicked in the pop-up. When closed, the content in the pop-up div gets deleted. Here is my code:
var $content = $('#popupcontent');
var $window = $('#popupwindow');
$('.open').click(function(){
//alert('runnning');
var a = $(this).contents('span');
$content.append(a);
$window.fadeIn(300);
});
$('.close').click(function(){
//alert('running');
var a = $content.contents('span');
$window.fadeOut(300);
$('#popupcontent span').remove();
});
My issue is that it is somehow removing the content before fading out, so the viewer can then see that the pop-up container goes blank. How can I make it so that it will surely fade out first and then remove the content? Here is a Jsfiddle to illustrate that: http://jsfiddle.net/kAdQK/4/

You may want to utilize the complete call back argument for the fadeout method, to remove the element once fadeout is completed. With your current code it will start the fadeout animation and then immediately remove the content without waiting for fadeout animation to complete, hence you get the visual effect that you are seeing now. Using the callback you make sure that it gets executed once the animation is complete.
$window.fadeOut(300, function () {
$('#popupcontent span').remove();
});
Syntax
.fadeOut( [duration ] [, complete ] )
Fiddle

You can use the animation complete to remove your element after the fadeout ends.
The following code will ensure that #popupcontent is removed only after it's faded out
$window.fadeOut('slow', function() {
$('#popupcontent span').remove();
});

Just use a setTimeout();
$window.fadeOut(300);
setTimeout(function(){
$('#popupcontent span').remove();},2000);
Example Here

Calling function after animation complete

I have 2 functions to open & close a sidebar on my page.
function closeSidebar(functionAfterClose) {
var functionAfterClose = functionAfterClose || function() {};
$("#sidebar").removeClass("open");
$("#sidebar").animate({marginLeft: margin*-1},"fast", "swing", functionAfterClose);
$("#dummy-column").animate({marginLeft: margin*-1},"fast", "swing");
}
function openSidebar() {
$("#sidebar").addClass("open");
$("#sidebar").animate({marginLeft:0},"fast", "swing");
$("#dummy-column").animate({marginLeft:0},"fast", "swing");
}
I'm trying pass function to closeSidebar() to run after the close animation is complete. But it seems to run straight away rather than waiting for the sidebar animation complete.
closeSidebar(function() {
alert("function called");
$(this).addClass("current");
openSidebar();
});
What am I missing to make the function call once the animation is complete?
The jsFiddle - Click a button on the right side, it should animate in, call the function, then animate back out again.

Your javascript is correct. The problem is in the CSS. You have a transition set up for the margin attribute. Erase that and your JS works fine.

Delayed drop down menus without jQuery

Do you know any dropdown menu scripts out there written in plain javascript, but not relying on jQuery?
I know how to achieve this with CSS, but I'd also like to add a nice fade effect and make it wait 1 second after the mouse is outside the menu, then close it if the mouse doesn't come back within the menu area.
I think I could implement the fade effect using the CSS "transition" property, but I have no clue on how to add the delay on mouseOut

I like this one, it's only 1.2 KB, the code is simple to modify:
http://www.scriptiny.com/2008/11/drop-down-menu/
You can change the time by modifying the "t" variable.

You could use the transition-delay-property and do the following:
remove the "delay-class", when the user enters the menu
add the "delay-class" when the user leaves the menu
See: https://developer.mozilla.org/en/CSS/transition-delay
Or you could do it like this (note: just pseudo code):
var timer = null;
function onenter() {
showSubMenu();
clearTimeout(timer);
timer = null;
}
function onleave() {
overMenu = false;
timer = setTimeout( function () { hideSubMenu(); } , 1000 );
}

jQuery callback freezing up

I made a little fiddle to illustrate the problem.
Basiaclly this works:
var visible = $('#container').find(' > div:visible'),
hidden = $('#container').find(' > div:hidden');
visible.fadeOut(1000, function() {
});
setTimeout(function() { hidden.fadeIn('slow') },1000);
and this doesn't:
var visible = $('#container').find(' > div:visible'),
hidden = $('#container').find(' > div:hidden');
visible.fadeOut(1000, function() {
hidden.fadeIn(100)
});
The second way makes the page freeze up.
Is there something wrong with the way I'm using the callback?
I need to be able to put it in an animation queue, because I need to be able to stop() everything.
Is there any way to make this work? I's broken on Chrome and FF

The problem in your 2nd solution is, that an animation will be started for each visible div and for each animation (which has finished) all hidden divs start the fade in animation.

Uhh, first of all, why are you using such construction:
$('#container').find(' > div:visible');
Just use:
$('#container > div:visible');
Second, don't use #container because for some reason if fires fadeOut for 301 elements inside which is just too much.
Scratch that, i see jsfiddle has been changed and now it's only one element in there. Not surprised that it crashed before - too many objects.
Third, after fadeOut nothing fades in because at the point when you assign hidden variable there is no hidden divs. You'll have to use this in your callback:
$('#container2 > div:hidden').fadeIn(1000)