Develop Reference

jQuery Animate - jumps then

Having an issue with a div content swap, where I want to animate in content then having it disappear if another element is clicked.
I have the content swap working correctly, but it "appears" without the animation. this happens for all elements upon first load. If you click the elements again, then the animation executes properly.
You can find my example here:
https://jsfiddle.net/aebguh3k/7/
Sample code:
$(document).ready(function() {
$('#select').on('click', 'a', function() {
$('.current').not($(this).closest('a').addClass('current')).removeClass('current');
$('.cselect:visible').hide().animate({
opacity: '0.0'
}, "slow");
$('.cselect[id=' + $(this).attr('data-id') + ']').show().animate({
opacity: '1.0'
}, "slow");
});
});
How can I fix the code so it animates properly

The opacity property is not added to your div, until the click handler is triggered. So there is anything that can be animated.
adding an initial style will help: https://jsfiddle.net/aebguh3k/8/
CSS:
.cselect {
opacity: 0;
}
JS:
$('.cselect:first').css({'opacity': '1'});

Just add to css:
#div2,
#div3,
#div4 {
opacity: 0;
}

How to animate nested content when animated parent slide moves into viewport, not using scroll

I'm looking to use javascript to animate the content of a nested DIV within an parent slide when the parent slide moves into the viewport.
At the moment, the content in the nested DIV only animates once a scroll command is also triggered after the parent slide moves onto the screen. I believe this is because the slide motion is animated and not scroll controlled.
The same issue is at play in this JSFiddle demo I created to explore the issue:
http://jsfiddle.net/9dz3ubL1/
(The animated movement of the slide from right to left in this demo has been created to test for this problem, to replicate the motion of the slide without scrolling; it is not actually a feature of the development proper).
My question is, how can I script for the animations to be triggered for each nested DIV, when each slide element moves into the viewport, without requiring a scroll function?
Thanks for any help. Here's the script I'm using to control opacity and other CSS stylings.
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll(function() {
/* Reveal hidden_header delayed */
$('.hidden_header').each(function(i) {
var center_of_object = $(this).offset().left + $(this).outerWidth();
var center_of_window = $(window).scrollLeft() + $(window).width();
/* If the object is completely visible in the window, fade it it */
if (center_of_window > center_of_object) {
$(this).animate({
'opacity': '1'
}, 500);
$(this).animate({
'right': '0'
}, 1500);
}
});
/* Reveal hidden_content delayed */
$('.hidden_content').each(function(i) {
var center_of_object = $(this).offset().left + $(this).outerWidth();
var center_of_window = $(window).scrollLeft() + $(window).width();
/* If the object is completely visible in the window, fade it it */
if (center_of_window > center_of_object) {
$(this).animate({
'opacity': '1'
}, 3000);
$(this).animate({
'bottom': '0'
}, 3500);
}
});
/* Reveal button delayed */
$('.button').each(function(i) {
var center_of_object = $(this).offset().left + $(this).outerWidth();
var center_of_window = $(window).scrollLeft() + $(window).width();
/* If the object is completely visible in the window, fade it it */
if (center_of_window > center_of_object) {
$(this).animate({
'opacity': '1'
}, 5000);
}
});
});
});

If your slide motion is animated fully (not incremental as it is in the jsfiddle you linked) then jQuery provides you with the ability to perform an action after your animation is complete.
http://api.jquery.com/animate/
Look at the options you can use for the animation function. One of them is called done. You can assign a function to the done option and that function will be called when your animation is complete.
Using one of your animates as an example, the syntax may look like this:
$(this).animate({
'opacity': '1'
}, {duration: 3000, done: function () {
//animate some stuff here
}};
Note that I just picked a random animation from your code. I'm not sure exactly when you want to perform the animation of the content, but you can use this technique anywhere you use a jQuery animate.
I've used this before to control nested animations in a slideshow format and it has worked very well! I hope this what you wanted.

Second animation not working

In an UL list do I want to animate the first LI inside. The first animation will remove the CSS class for the blue background and adds a new CSS to it to make it have a dark background. It also adds a new a line of code inside. The second animation will push the same div up with a fade on it so it disappears. Then it will get removed.
Both animations I have tested separated by commenting out the other animation and work proper.
The problem is that I can't run them together, if I do the first animation then the second animation won't work at all.
listTop = $('#ypPlaylist > ul li:first');
setTimeout(function ()
{
listTop.css('background', '#2d89ef').removeClass('bg-color-blue');
listTop.animate({ backgroundColor: '#1d1d1d' }, 300);
listTop.prepend('<b>Running: </b>').fadeTo(300);
}, 1000)
setTimeout(function ()
{
listTop.animate({ marginTop: '-=82px', opacity: 0 }, 800, function ()
{
listTop.remove();
});
}, 3000);

You can concatenate everything together, set a delay in between and remove the setTimeouts-function.
Checkout http://api.jquery.com/animate/ and http://api.jquery.com/delay/
There is also a short example $('#foo').slideUp(300).delay(800).fadeIn(400);

Animate opacity hide / show

so, what is the different between:
A) (work for me)
... .animate({opacity: "show", marginTop: "25"}); ...
...
B (doesn´t work for me)
... .animate({opacity: "1", marginTop: "25"}); ...
e.g http://jsbin.com/iquwuc/6/edit#preview

When you call hide() that's roughly equivalent to .css('display', 'none'), so later changing opacity back to 1 changes the opacity of a hidden element. And that's why show() works - because it makes the element block again.

It is because you are show and hiding, instead of animating the opacity. (Kinda obvious :P ).
Edited code : http://jsbin.com/iquwuc/11/edit#preview
You can make the following amendments to use the opacity setting:
Add the following css:
.sub-menu li#access ul {opacity:0; display:none;}
And change your script to this:
$(document).ready(function(){
$('.sub-menu').hover(function(){
$('.sub-menu li#access ul').show();
$('.sub-menu li#access ul').stop().animate({opacity: 1, marginTop: "25"}, 500);
},
function() {
$('.sub-menu li#access ul').stop().animate({opacity: 0, marginTop: "10"}, 500,function(){
$('.sub-menu li#access ul').hide();
});
});
});
Basically what is happening is:
On hover, you are SHOW'ing the dropdown with opacity 0, then animation happens to set margin and opacity. and on hover-out, animating opacity to 0 and HIDE'ing it again.

in the css file or inline. Set the id or class to
inline - <div id="myid" style="opacity:0;"></div>
in css
#myid { opacity: 0; }
.myclass {opacity: 0; }
that way when calling the animate opacity from jQuery it will function other wise your just calling an animation that is already at 1 opacity

I would use dojo bibliothek for it (http://dojotoolkit.org/reference-guide/dojo/animateProperty.html). You will find in DOJO more than only animating functionality, this framework offers a lot of components to solve big area of different problems.

Jquery: how to: when UL is shown, have first LI animate 'left' 20px, then to 0px, then have the second LI do that, then third, etc

When UL.chapters is 'slideDown', have the first 'chapters LI' animate the 'left' property to 20px, then animate back to 0px, then have the second LI do the same thing, then have the third, and so-on. with my code, they all animate directly after UL.chapters slides down, how do I make them do their animation 1 at a time, with the second not starting until the first has finished, etc.
$('h1').click(function() {
$('UL.chapters').slideDown(500);
$('.chapters LI').each(function() {
$(this).animate({'left':'20px'});
$(this).animate({'left':'0px'});
});
});
code updated.

Try this:
$(function() {
$('h1').click(function() {
$('.chapters').slideDown(500, function() {
doSlide($('.chapters li:first'));
});
});
});
function doSlide(current) {
$(current).animate({
'left': '20px'
}, function() {
$(current).animate({
'left': '0px'
}, function() {
doSlide($(current).next('li'));
});
});
}
This calls the slide animation function on the first <li> and then in the callback for the animation that slides it back to the starting position, it calls the function on the next <li>.
Here's a demo of it in action: http://jsfiddle.net/CBNgR/

Have you noticed the 4th line of your code is $('chapters LI') instead of $('.chapters LI')?
Also you're repeating yourself here. Try this:
$('h1').click(function() {
$('UL.chapters').slideDown(500);
$('.chapters LI').each(function() {
$(this).animate({'left':'20px'});
$(this).animate({'left':'0px'});
});
});
Also make sure that your LIs are set to position absolutely, or else your left animate will have issues.