Develop Reference

jQuery slide out issue

I am having an issue with some jQuery animations. I managed to make my flex sidebars slide in great but I am having some issue with the slide out effects. The slide out function is making the sidebars instantly vanish.
Also, I believe I need the hide() and show() functions because with just min/max-width the sidebars make the flex canvas very tall.
My slide out functions:
$('#close-left').click(function(event){
$('#left').animate({
'min-width': '0px',
'max-width': '0px',
}, 1250).hide();
});
$('#close-right').click(function(event){
$('#right').animate({
'min-width': '0px',
'max-width': '0px',
}, 1250).hide();
});
I made a quick fiddle that is producing the same issues: https://jsfiddle.net/89s5tsLr/
Update: I made a second fiddle showing how the right sidebar causes the flex canvas to be way too tall without the hide() function being called.
https://jsfiddle.net/soq6webp/1/
Thanks in advance for the help =)

remove the .hide()
That's what instantaneously making them disappear and messing up your animation.
--
EDIT: After our exchange in the comments I came to the conclusion that given your circumstances, you may not be able to do what you have in mind, so instead what you can do is:
Slide out animation first
Then show the content
$('#right').show().animate({ css to change here }, {
duration: 1250,
complete: function() {
// once animation is over, run all the code in this block
}
Check out this JsFiddle
The 2nd object passed to an animate function is options and one of these is complete which call the code once the animation is over.
So we animate the text in this anonymous function so that it's called once the animation on the #right div is over.
We do the same on the close button except we hide away our text first, then slide away the div.
(note the changes in the CSS as well)

fadeTo breaks smooth scroll

I'm using this snippet I found online to smooth scroll:
$( "a[href*='#']" ).on( "click", function( event ) {
event.preventDefault();
var href = event.target.href;
href = href.slice( href.indexOf( "#" ), href.length );
$( "body" ).animate( {
scrollTop: $( href ).get( 0 ).offsetTop
}, 1000 );
} );
It works just fine but it breaks when it comes across an image that is fading in. I have some images set to fadeTo from opacity 0 to 1 and when the scroll animation comes across those images it stops dead in it's tracks. In other words, the smooth scroll always stops at my first div because there are images fading in that stop the scroll so the scroll animation never takes the user to their desired destination.
How can I remedy this?

The janky-ness you're seeing is due to the extra rendering required to update the opacity of the images during the scroll, versus the scroll alone.
I'd suggest your best bet would be to disable the fade whilst the scroll is occurring.
To do this you could either set opacity to 1 for all images before calling animate(), or to prevent the fade from occurring until after the animation is complete, however the method to do this would depend on the code/framework used for the image fade.

Why is my jQuery transition is glitchy?

I have a jQuery transition with a css overlay that will work fine if the user mouses over for a second or more....however if the user mouses over quickly then the overlay text stays put without the overlay background. Here is my jQuery code:
$(".cascade-t1").hover(function(){
$(".cascade-corner").fadeOut();
$(".overlay-t1").animate({"left": "-300px"}, 300, function(){
$(".cascade-overlay-content").fadeIn(200);
});
}, function(){
$(".cascade-corner").fadeIn();
$(".cascade-overlay-content").fadeOut(200, function(){
$(".overlay-t1").animate({"left": "130px"}, 300);
});
});
Here is the script in action

It looks like the issue is that you don't fadeIn() the .overlay-t1 text until the mouseenter animation is done, and on mouseleave you fadeOut() the text out right away before the animation. When you move your mouse in and out faster than initial the animation the code will fade out the text and then fade it in again (the issue you're seeing).
One possible solution is to slightly alter your bottom (mouseleave) function to resemble your top (mouseenter) function more closely. Something like:
$(".cascade-corner").fadeIn();
$(".overlay-t1").stop(true, true).animate({"left": "130px"}, 300, function () {
$(".cascade-overlay-content").fadeOut(200);
});
The .stop() is there to keep the animation from playing over and over when someone spams the box.
FIDDLE DEMO

Not sure how jquery animate works under the hood but it's possible it's using javascript to animate instead of css transitions. The benefit of css transitions is that it does all of the animation calculations before the animation begins and is hardware accelerated. Javascript is at the mercy of the scheduler at a very high level so it will always be choppy.
Try jquery transit.
http://ricostacruz.com/jquery.transit/

Making a width transition in jQuery

I have an image, and when it is hovered on, I would like its width to increase using jQuery. I know how to do that, but now I would like to make this a slower effect, maybe 500 milliseconds long, not instant.
I know that it should be pretty easy, I just don't know the syntax.
How can this be achieved?
This is my current script:
$("#example").width("250");
EDIT: I came across another problem. I created two scripts, one for making the image larger and one for making it smaller. However, the script seems pretty buggy and unsmooth, and switches back and forth between big and small without reason. I am resizing it using onmouseover and onmouseout.
//Bigger
$("#example").animate({width: 250}, 200 );
//Smaller
$("#example").animate({width: 200}, 200 );

This should be what your looking for, it will animate the width of the example div out to 250px at a speed of 500 miliseconds
$("#example").animate({width: 250}, 500 );
Hope that helps
EDIT: With regards to your updated question: http://jsfiddle.net/Hfs7L/2/

$("#example").stop().animate({width:250}, 500); // bigger
$("#example").stop().animate({width:200}, 500); // smaller
using jQuery .animate() and .stop()

Regarding your updated problem:
Try and get the animations out of the animation queue, so it doesn't have to finish before it can start a new animation:
//Bigger
$("#example").stop(true, true).animate({width: 250}, 200 );
//Smaller
$("#example").stop(true, true).animate({width: 200}, 200 );

$("#example").animate({width:'250'}, 500);

jQuery's stop() seems to be blocking animations that haven't been queued yet

How does jQuery's stop() actually work?
If you look here (http://jsfiddle.net/hWTT6/), when you hover over the main blue box it should fade to red, and when you hover off it should fade back. The problem is it will completely fade to red (and then back to blue) even if the mouse has hovered off before the first fade was complete. The problem can more clearly be seen with the slide effect. Hover over the slide "button" and the main box will slide to blue, hover off, it will slide back. But try hovering on and off and on and off, before the first animation has completed. You'll see that all four animations are carried out. I included both examples here to show it is not just a problem with one effect or something.
I thought this would be easily fixed by adding a stop before the animations, as shown commented out in the code. But, if I do this the current animation will stop and the following one will never start. Almost as though stop is blocking an animation that is occurring after the call to stop.
What am I missing here?
Thanks.

You are missing that .stop() accepts two arguments. Both boolean, indicating:
- clearQueue (first)
- jumpToEnd (second)
So by calling $('#foo').stop( true, true ).doSomeOtherStuff() you should get your desired goal.
Reference: .stop()

The problem is the CSS is getting messed up by stopping at arbitrary points.
The fadeIn(), fadeOut(), slideUp() and slideDown() move from the current state to a new one and then revert to that - not to the original CSS.
You need to fix the CSS back in to a usable state to continue with after the .stop(), or more clearly specify the animation targets.
As the others have said, you can get the CSS to the correct position, by ensuring that when you stop the animation, it jumps to the end of it, rather than leaving everything in an arbitrary state.
UPDATE:
Take a look at the code in this update of your demonstration: http://jsfiddle.net/hWTT6/5/
It might not be exactly how you want it to perform, but the trick, if you do not want the animation to run its course, is to get the animation back in to a state that it can continue from in the way in which you desire.
$(function() {
$('#fade')
.mouseenter(function() {
$('#fg_fade').stop().animate({ 'opacity': 0 }, 'slow', function() {
$('#fg_fade').css('height', '100%');
});
})
.mouseleave(function() {
$('#fg_fade').stop().animate({ 'opacity': 1, 'height': '100%' }, 'slow');
});
$('#slide_fire')
.mouseenter(function() {
$('#fg_fade').stop().animate({ 'height': 0 }, 'slow', function() {
$('#fg_fade').css('opacity', 1);
});
})
.mouseleave(function() {
$('#fg_fade').stop().animate({ 'height': '100%' }, 'slow', function() {
$('#fg_fade').css('opacity', 1);
});
});
});

You could set the stop() options to (true, true) so that you cancel all events in cue and jump to the end of the previous animation. look at the fiddle:http://jsfiddle.net/hWTT6/4/

The stop method can be called in the following difference ways:
.stop(true);
//Same as:
.stop(true, false); //Empty the animation queue only
//Or
.stop(true,true); // Empties the animation queue AND jumps to the end
//Default
.stop()
//Same as
.stop(false,false);
There may be a better way using .animate instead: Demo Here
$(function() {
$('#fade')
.mouseenter(function() {
$('#fg_fade').stop().css('height', '10em').animate({'opacity' : '0'}, 'slow');
})
.mouseleave(function() {
$('#fg_fade').stop().css('height', '10em').animate({'opacity' : '1'}, 'slow');
});
$('#slide_fire')
.mouseenter(function() {
$('#fg_fade').stop().css('opacity', '1').animate({'height' : '0'}, 'slow');
})
.mouseleave(function() {
$('#fg_fade').stop().css('opacity', '1').animate({'height' : '10em'}, 'slow');
});
});
This way the animation stops when you want it to and still runs the next animation.
The problem with doing .stop then slideUp/slideDown or fadeIn/fadeOut is that the animation can end prematurely and keep an incorrect height/opacity.

The problem is caused by the way fadeIn, fadeOut etc. work. You may expect them to fade between 0 and 1. However, in reality they fade between 0 and whatever the "baseline" opacity is. You can see this here:
http://jsfiddle.net/hWTT6/7/
You'll notice I set the initial opacity to .5. Now when I call fadeIn it does not fade all the way in to 1 it fades to my baseline of .5. Your problem occurs when you stop the animation prematurely, the "baseline" becomes whatever the opacity is at the time it is stopped. Now when you call fadeIn on mouseleave it tries to fade to this new baseline and finds it is already there. You can see this illustrated by going here:
http://jsfiddle.net/hWTT6/8/ (original, but with .stop)
If you place your mouse over slide and then remove it half-way through the animation, it will stop in the middle. Now place your mouse back over slide and wait for the animation to complete. If you now remove your mouse, you will see that it slides back down to the place where the first animation was stopped. That is because this is the new "baseline".
The way that you would solve this is actually to replace fadeIn, fadeOut, etc. with a more explicit animation. For instance, use fadeTo to tell it to fade between 0 and 1:
http://jsfiddle.net/hWTT6/6/
Notice that since I am telling it to fade to 0 or 1 everything works. A similar thing could be done to replace slideUp and slideDown using animate.