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

Switching photo position via click on thumbnail with jquery

I am trying to put a photo view/slideshow on my webpage and I am not getting the results I am looking for. I have created a Fiddle HERE to show you what I am trying to do. What I want it to do is when you click a thumbnail it switches the thumbnail into the main photo spot and the main photo into the thumbnail spot. It works at first but after you start clicking the other thumbnails it starts not switching the correct photo into the main slot. Also if you reclick the thumbnail you just clicked it does nothing. Here is my jquery code but take a look at my fiddle and you will be able to see what I am trying to do.
$('.thumb1').click(function() {
$('.thumb1, .main').fadeIn().toggleClass('thumb1 main');
});
$('.thumb2').click(function() {
$('.thumb2, .main').fadeIn().toggleClass('thumb2 main');
});
$('.thumb3').click(function() {
$('.thumb3, .main').fadeIn().toggleClass('thumb3 main');
});
$('.thumb4').click(function() {
$('.thumb4, .main').fadeIn().toggleClass('thumb4 main');
});

I changed your classes similarly to how Joao did, but my JavaScript is a little different
$('.thumb').click(function () {
var newHTML = this.innerHTML;
this.innerHTML = $('.main')[0].innerHTML
$('.main').html(newHTML);
});
Instead of just changing the src, you will also keep all other attributes of the images, such as the alt attribute, which you should add to your images for accessibility purposes.
I didn't implement the idea of not having clicking the same one do nothing, because then if they want to look at the image they just looked at they can't.
JSFiddle: http://jsfiddle.net/howderek/RfKh4/6/

I was looking at your code, and I wouldn't recommend switching around classes between elements like that since it might throw out a couple of bugs like yours. I played around with your code and simplified a little bit:
$('.thumb').click(function () {
var previousSrc = $('.main').children().attr('src');
$('.main').children().attr('src', $(this).children().attr('src'));
$(this).children().attr('src', previousSrc);
});
Here's the updated fiddle: http://jsfiddle.net/RfKh4/5/
Basically what I did was save the previous src attribute of the .main div image inside previousSrc and then I change the div's image to the one in the thumbnail. And finally change the thumbnail's image to the one that was on the .main div. Hope it helps you!

Jquery create animation swapping a series of images in a div

I am trying to create an effect where i display a short animation wherever the user clicks on a page. For this i need to quickly swap background image of a div with an array of image once. I couldn't find a way to do that just with the animate() or fadeOut() methods in jquery, so i tried it with setTimeout(), but all in vain. Please guide me to the best technique for what i am trying to do.
JSFiddle
P.S: I am having problems with including JSFiddle links in my posts, so i will leave it to others for edit. Although an explanation to this would help a lot.

This should work:
var imgc;
var images = Array("http://s11.postimg.org/8iznatxr3/image.png",
"http://s11.postimg.org/g08uq1na7/image.png",
"http://s11.postimg.org/hgkd86q73/image.png",
"http://s11.postimg.org/5fyx7gisf/image.png",
"http://s11.postimg.org/3pfw5z19b/image.png");
$(document).click(function(e){
imgc = -1;
$('#ball').show().css({left:e.pageX +'px',top:e.pageY+'px'});
setImage();
});
function setImage() {
imgc++;
var newimage = images[imgc];
if (imgc < 5) {
$('#ball').fadeOut(50).css("background-image", "url("+newimage+")").fadeIn(50);
setTimeout(setImage, 100);
}
}
JSFiddle
Note that I replaced animate() with fadeIn() and fadeOut().

What are some ways to speed up an img swap in jquery / javascript?

I have a slightly vague question. I have the following in my code: http://jsfiddle.net/PMnmw/2/
In the jsfiddle example, it runs smoothly. The images are swapped quickly and without any hassle. When it is in my codebase though, there is a definite lag.
I'm trying to figure out why that lag is happening. The structure of the jquery is exactly the same as above. I.e. Inside the $(document).ready (...) function, I have a check to see if the user clicked on the img (based on the classname) and then I execute the same code as in the jsfiddle.
I'm at my wits end trying to figure out what to do here... Clearly I'm not doing the swap right, or I'm being very heavy handed in doing it. Prior to this, one of my colleagues was using AJAX to do the swap, but that seems to be even more heavy duty (a full fledged get request to get the other icon...).

I've modified your fiddle: http://jsfiddle.net/PMnmw/12/
Things I've optimized:
Created a variable for both img1 and img2, so that you won't have to navigate the DOM to reference those two images anymore, thusly improving performance.
Applied a click handler to the images themselves, so you don't have to search the children of the wrapper.
The basic idea was to reduce the number of jquery selections as much as possible.
Let me know if this helped speed things up.
$(document).ready(function() {
var img1 = $('#img1');
var img2 = $('#img2');
$(".toggle_img").click(function(e) {
var target = $(e.target);
if(target.is(img1)){
img1.hide();
img2.show();
}
else if (target.is(img2)) {
img2.hide();
img1.show();
}
});
});

Images that are not visible are normally not loaded by the browser before they are made visible. If there seems to be a problem, start by downloading an image optimizer like RIOT or pngCrush to optimize your images.
If it's only two arrows, you should consider joining them into a CSS sprite.
You could try not doing everything with jQuery, but it shouldn't really make that much difference.
Something like this maybe, with the hidden image loaded in JS and some traversing done outside jQuery (but that is probably not the problem, although the code seems overly long for a simple image swap?) :
$(document).ready(function() {
var img=new Image();
img.src='http://i.imgur.com/ZFSRC.png'; //hidden image url
$(".wrapper").click(function(e) {
if(e.target.className=='toggle_img') {
$('.toggle_img').toggle();
if (e.target.parentNode.childNodes[1].style.display=='none') {
console.log("hello");
} else {
console.log("goodbye");
}
}
});
});
FIDDLE
​

Javascript/JQuery: Gallery with very large images. How can I have it on click fade out, load the next image, and then fade in w/ the new image?

my boss has me working on a website that basically has a very large gallery right in the middle.
The way this one part needs to work is that the user clicks a next/prev button, the image fades out, displays a loading spinning image gif, and then fades in with the new image when it's down downloading. I have no idea where to even begin.
I know jquery somewhat, but I'm very new to actual javascript. My only reference book at hand is a copy of "Javascript for Dummies" for 1997. Is this of any use to me at all, or has Javascript changed since then?

There are lots of jQuery plugin for image gallery: Galleria, GalleryView, Pikachoose, and this one.
Or you can search from jQuery plugins page.

Please get a newer book, or just use the web as a resource, any info. from 1997 is going to be horribly outdated.
This is a very simple site I've recommended to beginners before: http://htmldog.com/guides/javascript/
No, it doesn't cover everything, but that's what's good about it, you'll get some key things down, and then be able to search on google for more specific stuff.
To give you some barebones ot start with, I would do something like this:
$(document).ready(function() {
$('#nextBtn').click(function() {
transitionToNextImage ();
});
});
transitionToNextImage = function() {
$('img.active-image').fadeTo(1000,0), function() {
// fade out complete.
$('#inProgressGif').show();
getNextImage();
});
};
getNextImage = function() {
// make ajax call to get new image, and
// in the success callback of the ajax call,
// remove the inProgressGif, and
// add the image ot the DOM with opacity 0,
// then slowly fade it in to opacity 1 (opposite
// of what was done above
};