Hard Javascript/jQuery Animation (Spinner/Scroller) - javascript

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.

Related

Animate object off of screen with no lag

I've been using Animate.CSS and basic Jquery to animate elements on and off the screen. The issue is this has been creating a lot of lag due to a background slideshow occurring at the same time as the on screen animations. I've been looking into alternatives to help fix this issue.
I've read about using Opacity and TranslateZ etc to have elements come in and off of the page.
What would be the best way to change my code below to potentially lag less during animation?
//Screen 7 Start
//Highest Planned College
$( "#screen7" ).hide()
$(".buttonsQuestion7").click(function() {
$('#screen7').addClass('animated slideOutUp');
$('#screen7').fadeOut()
$( "#screen8" ).show()
$( "#screen8" ).addClass('animated slideInUp');
});
I had lag problems too with jQuery animations. The problem was lying in having several animations after one another like you have :
$('#screen7').fadeOut();
$( "#screen8" ).show();
What fixed it for me was to call the second animation in the callback of the first one like so:
$('#screen7').effect('fadeOut', {
direction: 'left',
mode: 'hide',
duration: '300',
complete: function(){
$('#screen8').show();
}
});
In this case i am using .effect() from jQuery UI but .fadeOut() has the same complete callback option
http://api.jquery.com/fadeout/
Hope that helps

Properly animate multiple elements with Jquery

Probably I didn't choose the best title for my question, sorry for that.
I'm pretty new with jQuery, hence with animations.
I'm just experimenting with It, but now I have a problem.
The script works like I want, but It seems a bit "buggy", I bet my code isn't optimized, at all... Plus I may be using a wrong way to achieve what I want.
One button is triggering the script (Its not supposed to be like that at the end, but momentarily I'm using this button to trigger the script), it works like a "toggle" and every time I click on "Show", a bunch of HTML is shown and two animations run:
$(".achievement_container").hide(300).show(); //shows the whole container
$(".glow").fadeIn(100).fadeOut(800); // First "brightening" effect
This one shows the whole "frame", while another animation runs for a lighting effect:
$(".ach_hover").css("left", "0px").css("opacity", "1").animate({
left: "252px",
opacity: "0"
}, 1100);
You can see a "working" example here:
http://jsfiddle.net/Frondor/6EA6W/
My problem appear after I click the "Show" button many times, the $(".ach_hover") animation start to fail and it doesn't appear, at all...
I'm not satisfied with the way I wrote this last animation, at least I think there might be a better and "standard" way to achieve this.
So I would really appreciate any suggestion from jQuery experts to "optimize" my script, and avoid any buggy behavior on it.
Thanks in advance
Try using jQuery .stop()
Stop the currently-running animation on the matched elements.
$(".ach_hover")
.css({
"left": "0px",
"opacity": "1"
})
.stop()
.animate({
left: "252px",
opacity: "0"
}, 1100);
Fiddle

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!

How to force jQuery animations to run simultaneously?

I have a web page with animations (JQuery Animation) all over the place. A typical animation sequence may contain three or four objects animating independently at the same time. The issue I am facing is that the queuing of the animations is not predictable. Some of the animations are running simultaneously while some others are not.
I am doing something like
setTimeout(function(){
//animations
}, delay);
in many places just to try and group the animations. Even when using this, some of the animations inside the code block are not running simultaneously.
Is there any way to force animations to be run at the same time? Is there a way to fill up the queue with animations and then execute these at the same time?
Is there any comprehensive documentation of how this thing actually works?
EDIT: Sample code Warning: The code is messy
The question is looking at the code how do you know which of the animations are going to run simultaneously?
This run simultaneously (but not if there's already an ongoing animation on the object):
$('.blabla .2').animate({opacity: 0.3, fontSize: 20}, 800);
And if you want to be 100% sure that it's animated right away (notice the queue:false):
$('.blabla .1').animate({fontSize: 20},{queue:false,duration:800});
You can also do this. (It will still run simultaneously)
$('.blabla .1')
.animate({fontSize: 20},{queue:false,duration:800})
.animate({opacity: 0.4},{queue:false,duration:800});
This runs one after the other.
$('.blabla .1').animate({opacity: 0.3}, 800).animate({fontSize: 20}, 800);
So does this
$('.blabla .2').animate({opacity: 0.3}, 800, function() {
$('.blabla .3').animate({opacity: 0.3}, 800);
});
I hope that answers your question.
Sorry for all the edits, i'm new here.
Use the step option. You give it a function, and after each step of the current animation, it will execute that function. Thus you can animate there. Link to docs.

JQuery animation: Is it possible to change speed during the animation?

I want to move a div down a page, and I want it to slow down as it reaches the target.
I tried using call back with recursive func but it doesn’t look smooth:
function MovePanel() {
sidePanel.animate({
"marginTop": newCurrTop
}, moveSpeed, function () {
MovePanel();
});
}
Is it possible to slow down an JQuery animation?
If not what are the alternatives?
Thanks.
The animate method takes a 3rd param called "easing"; learn about it here:
http://api.jquery.com/animate/
You might want to check this out: http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations
Easing can really bring life to an
effect. Easing controls how an
animation progresses over time by
manipulating its acceleration.

Categories

Resources