Develop Reference

fade backgrounds move text up

I have multiple background images that are behind a block of text each. I would like to fade each background image and have the text move up when one background image fades into another.
For example
BG1 (background image 1) has Tegxt1 on top of it. As BG1 fades into BG2, Text1 moves up and is replaced by Text2.
How can I do this with simple jquery and javascript and CSS?
Here's what I tried
this._currentTimeout = setTimeout(function() {
this.slides$.eq(newSlideIndex).css('z-index', 3).fadeTo(ANIMATION_FADE_DURATION, 1, function() {
this.slides$.eq(this.currentSlideIndex).css('z-index', 1).css('opacity', 0);
this.slides$.eq(newSlideIndex).css('z-index', 2);
this.currentSlideIndex = newSlideIndex;
this._setTransitionTimerForNewSlide(this._getNextSlideIndex(), 5000);
}.bind(this));
}.bind(this), durationUntilTransition);

You did not provide enough code to generate a complete working example (How is your html structured? Where is your jQuery located on the page? What does your existing CSS look like?), so unfortunately no one on StackOverflow and give you a perfect answer. The best we can do is create a small demo of what you could do to accomplish this affect. It's then up to you to learn from the example and apply the concept to your own code.
If I was going to try to accomplish this, here's the approach I would take:
Stack images on top of each other with position: absolute;
The first image group should have the highest z-index, so it's on top. CSS can do this!
The second image group should have the second-highest z-index, so that it shows behind the first image during the fade. CSS again!
all other image_groups should have z-index below the second image. Yay for CSS!
Animate the image and text seperately
The image just needs to fade out
The text needs to fade up and out
After the first (top) image group is completely faded, move it to the bottom of the list
Remove the inline style="..." that jQuery's .animate() applies to the image group. Once we do this, the image group will adhere to the css rules we set up in step one.
JS Fiddle Demo
The first step will be done manually by you when you're writing HTML and CSS, but then your jQuery can handle steps 2-4. Then just repeat as much as you'd like. Ask questions if you need to, but try hard to apply this to your own code. Good luck!!

On first load, user sees glimpse of end of animation before animation starts

I have a simple page that involves some animations. The first time the page is loaded, the user sees the end result of the animations for a split second, before going to the start of the animations. The animation sequence is of a blank screen, with words and sentences fading into or sliding into view. I am using the animation.css javascript library.
$(document).ready(function()
{
$('#pineappleCheesecake').addClass('animated fadeIn');
$('h1').addClass('animated rubberBand');
$('p').addClass('animated bounceInUp')
$('ul').addClass('animated lightSpeedIn');
});
I have tried using this instead of document ready
document.addEventListener('DOMContentLoaded', function() {
// ...
});
But this did not work. I then tried taking the document.ready out completely, but I had the same results.
I could try having the page load with a black div covering the screen, which I would remove at the beginning of the animation, but it seems like a hackish way of doing it, and I suspect there's a simpler, cleaner, better way of removing the unintended glimpse of the end result. Please help.

Try setting all of the CSS values to their 'default' before the javascript runs. This may fix the problem.

I have found an answer to my problem. Although it is not the clean answer I was looking for, and I still suspect there's a more direct solution out there, I made this solution as simple as possible.
In the html, I surrounded everything in the body in a div bracket.
<div id="coverDiv">
...
</div>
In the CSS, I set it's properties to this.
#coverDiv {
background: black;
display: none;
}
In the javascript, I began the animation by displaying the coverDiv.
$("#coverDiv").css("display", "inline");
In actuality, the coverDiv doesn't cover, so much as it contains, and is revealed at the beginning of the animation.
Thanks to DripDrop for steering me towards this solution.

How to trigger an SVG animation on scroll?

So I've finally cracked SVG animations (totally through cheating) and like most sites that use them if they're halfway down the page they begin automatically and you miss it, so how is it possible to trigger the animation on scroll to that div container?
Any help would be great,
Thanks!

You can use
beginElement() function to starts animations manually.
for this to work, you have to set the begin attribute of animate element to indefinite
a simple example would be something like
window.onscroll = function(){
var anime= document.getElementsByTagName('animate')[0];
// check for the amount of scroll
anime.beginElement();
}
You could also make use of beginElementAt()
read more about svg Animation Timing Control
side note: Can't be more accurate since you haven't shared much info or code samples, and not sure what you meant by 'cheating'

How to keep div focus when the mouse enters a child node

So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!

Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.

I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...

1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.

Animating Background Image

I Like using Jquery and its companion Jquery Ui but can not find a way to animate background image over a certain period of time like 5 seconds.
I can not do something like:
$('sampleelement').animate({'background-image':'url(hello.jpg)'},5000);
Any ideas??

This is not possible like this. Css does not allow for backgound image manipulation like this. You should put in a div with the background behind your content and fade that in:
<div id='background_img' style='display:none; position:absolute;'><!-- position me behind the content!--><img ... /></div>
<div id='content'>YDADA</div>
$('#background_img').fadeIn(5000);

Use the jQuery Background-Position Animations plugin. See the demo.

Why don't you use an animated GIF?

Pim Jager's approach is about the closest you will get without an animated gif.

You could create multiple images and just replace one with another using setTimeout. It's kind of like emulating .gif, just gives more flexibility and quality.

What I did on Cheer Us Up is used basic javascript to change the background image --
$(function(){
curr = 0;
setTimout(changeBg(),200);
});
function changeBg() {
curr++;
document.body.style.backgroundPosition = curr + 20;
}
That is the basic idea. I didn't use jquery because I just wanted it to slowly slide by.

This is what you need: http://www.ovalpixels.com/bgImageTransition/