I want to instruct my user on how to interact with a part of a website with a drawn arrow and handwritten instructions. I also want it to scale up and down repeatedly in a pulsate effect with jQuery. I know there is a pulsate plugin for jQuery, but I don't know how to mix that with scale. Thanks for your responses.
As far as I know, the jQuery pulsate is for opacity only. Instead of that, I wrote a quick "pulse" function. Just animates smaller, then larger and starts again. You need to call pulse in onload.
function pulse() {
$('#arrow').animate({
height: '200px'
}, 400, function() {
// First animate complete
$('#arrow').animate({
height: '150px'
}, 400, function() {
// Second animate complete
pulse();
});
});
}
See demo here:
http://jsbin.com/ejeni4/2/
http://jsbin.com/ejeni4/2/edit
There may be a better way, and of course you probably need to clean up the css to make it point where you want, etc.
Related
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.
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
I am building a website that has a few animations when you load the home page (for example, the main logo and a few menus slide in from the sides of the screen). Simultaneously, I am also using AJAX in the background to start to load some images that might be viewed later. The problem with this is that when the images are loading, the animations become quite choppy. Is there any way to stop this? Or maybe give the AJAX function a lower priority so that it doesn't try to do anything when an animation is running?
Here is the current script I'm using to load these images:
$('.lightbox-container.first').load('/images/first_set/', function(){
$('.lightbox-container.second').load('/images/second_set/', function(){
$('.lightbox-container.third').load('/images/third_set/', function(){
$('.lightbox-container.fourth').load('/images/fourth_set/', function(){
$('.lightbox-container.fifth').load('/images/fifth_set/', function(){
$('.lightbox-container.sixth').load('/images/sixth_set/');
});
});
});
});
});
An all of my animation function look something like:
$('.third-section').animate({ 'opacity': '1', 'height': '200px', 'padding-top': '20px', }, 500);
The problem
Since all your ajax and js animations run on the same browser thread, you are bound to have this problems. You are reaching the limits of your CPU, which causes the choppiness.
How to solve this
Use CSS3 transforms. Those are hardware accelerated in all modern browsers and run on a separate threads, so their performance is generally not affected by ajax calls. Since you said you only slide things around, I think this would be the ideal solution for you. There is a great article about it here:
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Your case
So to actually make this work for you. Leave the ugly ajax calls as they are for now. Instead of using jQuery animate, you need 2 states - the initial, which positions the slide away and one with an extra class, which positions your slide in it's target place.
All you have to do is add the class to the slide and it will nicely come in place. Theory is simple.
Sample
Your initial state could be something like this:
.slide {
transform: translate(-400px, -200px);
transition: all 5s;
}
And the one to show in place:
.slide.show {
transform: translate(0px, 0px);
}
I created this multi-layered animation that takes 4 images ("layers") and animates them to "zoom away". It usually runs smoothly but once in a while when the 3rd layer starts, the 2nd layer animation kind of lags. I'm not really sure why/when the lag happens - maybe due to GPU processing?
http://jsfiddle.net/3EwnB/3/
Is there anything I can do to reduce any animation lag?
And if there's a better way to achieve this effect I'm not stuck on using jQuery.animate - alternate suggestions are welcome.
The code for the jQuery animation (for 1 of the 4 layers):
setTimeout(function() {
$('#animation-layer-2').show().animate({
opacity: '0.9',
marginLeft: '-490px',
marginTop: '25px',
width: '950px'
}, { duration: 400, queue: false });
}, 500)
Also, in the JS Fiddle example, the images are 9-17kb but that actual images I'm using are 131-457kb. The image sizes don't seem to make much of a difference though.
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!