Develop Reference

Hard Javascript/jQuery Animation (Spinner/Scroller)

Okay, I'm trying to make it so when you click a button it'll spin a div with it's randomized contents and it'll slow down on stop on a specified div, now I have no idea where to start,
Here is an example of what I'm trying to do,
https://www.youtube.com/watch?v=y7jjhLUKleg
Any idea how to start? what should my priority be, jQuery or Javascript?
Kind Regards
EDIT: I'm not asking for anyone to spoonfeed me code, I just need an idea on where to start.

The animation itself can be probably solved easily using JQuery Animate functions. The animation supports easing, and the "ease out" is what you need. With some CSS, you would create some kind of viewport, and move the elements from right to left until the animation stops.
Let me help you with some starting code: http://jsfiddle.net/dfevruws/1/
The animation command is very simple:
$(function() {
$( "#items" ).animate({
left: -2000
}, {
duration: 5000,
easing: "easeOutQuad"
});
});
Probably more interesting than this is how you handle the selected item, but this is a different story, you ask for the Animation.

css animation fast forward and rewind

I was wondering if it was possible, using some javascript or jquery, to skip to the next, or go to the last part of a css animation. Lets say we have the following:
#keyframe effect{
0%{opacity:1;}
45%{opacity:1;}
50%{opacity:0;}
95%{opacity:0;}
100%{opacity:1;}
}
that will fade something out and then back in
so lets say I made some buttons. How would I do the following:
$('#next').click(function(){
//skip to the next animation part
});
$('#previous').click(function(){
//skip to the previous animation part
});

It's not really possible unless you break the CSS into different parts based on classes and then add/remove classes.
However, there is an absolutely fantastic javascript library called Greensock, that allows timeline-based animation - and in many cases is faster than CSS animations. It also has the benefit of being cross-browser compatible.
If you were, for example to create something similar using Greensock, it would look something like this:
var effect = new TimelineMax({paused:true});
effect.addLabel('start');
effect.to(
'#myItem',
1,
{css:{opacity:1}}
);
effect.addLabel('step1');
effect.to(
'#myItem',
1,
{css:{opacity:0}}
);
effect.addLabel('end');
effect.play();
$('#gotoEnd').on('click', function(e){
e.preventDefault();
effect.seek('end');
});

With the use of the animation-play-state Property, you can pause an animation and update the transform, then restart it.
element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";
However you can't pause the animation, transform it, resume it, and expect it to run fluidly from the new transformed state.
At this time, there is no way to get the exact current "percentage completed" of a CSS keyframe animation. The best method to approximate it is using a setInterval or requestAnimationFrame.
This CSS tricks article explains this further, and gives an example of using setInterval. Another option is to use request animation frame
As mentioned GreenSock or Velocity are animation libraries which allow for extremely fast and smooth animations

Jquery: Delay before triggering Supersized function?

I have a page that has a lot of animations on it, as well as the Supersized plugin 9large background image carousel). It seems that loading the background image for the Supersized function disrupts my animations a little, making them jerky.
I am wondering if anyone knows of a way to delay the triggering of a function? EG:
jQuery(function($).delay('1000'){
$.supersized({
//Functionality
slideshow:1, //Slideshow on/off
autoplay:1, //Slideshow starts playing automatically
etc...
Ive tried combinations of the above to no effect.
My goal would be to have all my other animations completed before the plugin gets triggered.
Would anyone have any suggestions on how to achieve this? Thanks!

You can delay the execution of a function using setTimeout.
setTimeout( function() {
$.supersized({});
}, 1000);
Not sure how you are animating your page, but If you are using any of the jQuery animation methods you can also try calling your supersized function from a callback. For example:
$('selector').animate({
left: '+=50'
}, 2000, function() {
$.supersized({});
});
This will call your supersized function after the animation completes.

Jquery finding the right easing function

Hi all im trying to create a loading animation with html and JQuery that looks like the windows phone 7 loading animation.
I have gotten this far
http://jsfiddle.net/b6L8M/5/
But the easing function does the opposite of what i want, i want it to go fast when its on the edges and then slow down when it comes to the center.
when looking at http://jqueryui.com/demos/effect/easing.html it does not seem that there is a built-in function for that, so how would i create that function?

If you split-up your animation into two parts you can ease-in to the center and ease-out of the center:
function moveDot(dotItem, delay) {
var dotItem = $(dotItem);
dotItem.delay(delay * 200).css('left', '0%').animate({left: '50%'}, 1000, 'easeOutCirc', function() {
dotItem.animate({left : '100%'}, 1000, 'easeInCirc', function () {
moveDot(dotItem[0], 0);
});
});
}
I also cached the $(dotItem) selection so it doesn't create a hiccup mid-animation while creating another selection (not a big chance of this happening but hey :) ).
Here is a demo: http://jsfiddle.net/b6L8M/13/

Sometimes, you have to use more than one animate function to do what you want.
I don't know how the windows phone 7 animation looks but I tried this according on what you said :
$(dotItem).delay(delay * 200).css('left', '0%').animate({left: '50%'}, 1000, 'easeOutQuart', function() {
$(this).animate({left: '100%'}, 1000, 'easeInQuart', function() {
moveDot(dotItem, 0);
});
});
The first one, easeOutQuart, is fast then slow down. The second is slow then accelrate.
I used the chaining system, but it makes the elements stop during some ms. You also can use a "delay" to do so without stop.

After fiddeling around in fiddler and using this post Help with custom jquery easing function i got it to work like i wanted
http://jsfiddle.net/b6L8M/24/ it's more or less identical to the WP7 loading!

Using jQuery for alternating png transition

Very basic question. I have a very simple web design utilizing a png with transparency, overlaying another base image. The idea here is that it cycles visibility continously, fading in quickly, displaying for a longer interval, fading out quickly, and remaining invisible for an equal longer interval, basically replicating the behavior of an animated GIF from back in the day. The png starts with display set to none.
My problem is jQuery doesn't seem to have a "pause" or "delay" event handler to help here. There are numerous plugins filling the gap, but I'd rather not include one if there's a simple way that I'm missing. That might require falling back on setInterval or setTimeOut, but I'm uncertain of the syntax to do that.
What I want schematically is something like:
--loop start--
$("#pngOverlay").fadeIn(1000);
(5000 delay) // using setTimeout or setInterval if jQuery method unavailable
$("#pngOverlay").fadeOut(1000);
(5000 delay)
--loop repeat--
The following does the behavior once, so I guess if this could be wrapped in a loop it might work, but it doesn't strike me as elegant or the right way.
setTimeout(function() {
$("#pngOverlay").fadeIn(1000);
}, 5000);
setTimeout(function() {
$("#pngOverlay").fadeOut(1000);
}, 10000);
Thanks for any suggestions. I would just use GIFs, but need the transparency for this. (In the old days, we used animated GIFs and we liked them...)

<script language="JavaScript" type="text/javascript">
function showimage(){
$("#pngOverlay").fadeIn(1000);
setTimeout('hideimage()',5000);
}
function hideimage(){
$("#pngOverlay").fadeOut(1000);
setTimeout('showimage()',5000);
}
$(document).ready(function() {
showimage();
});
</script>

Something like this?
setInterval(function()
{
var elm = $('#pngOverlay');
if (elm.is(':hidden'))
elm.fadeIn(1000);
else
elm.fadeOut(1000);
}, 5000);

How about using an animated PNG?

One trick I have seen is to have jQuery carry out an animation for 5000 milliseconds that has no visible effect.
$("#pngOverlay").animate({opacity:1}, 5000);
If the opacity of the item was 1 to start with then it does not have a visible effect but it does pause for 5 seconds.