I have a codepen where I am recreating (recreating because I saw this in someone else's pen) a loading icon that looks like a newton's cradle. That codepen can be found here.
My issue is that I want the balls to change their background color to the same color as their border when they swing out and change back to transparent when they return to the center.
I thought that I could just change the color before and after I animate each ball within the moveRight and moveLeft functions, but that doesn't seem to be working for whatever reason. I have checked the syntax of the JQuery functions several times, but can't seem to find an error with how I am calling them.
At first, I believed that the issue has something to do with setting the balls to be transparent, but I have (I believe) debunked that theory. My new theory is that it is trying to call the css function twice at a time on two different elements and is just malfunctioning as a result. I'm not sure that this is true however, as the function should be terminated before it is called again, right?
Every time I call either function, I pass a parameter similar to '#1-1'. This is the id of one of the five dots, the second digit representing the number (so the first is 1-1, second 1-2, etc. The animation is working, so I would assume that there is no issue with the selectors inside of the functions.
Can someone shed some light on this issue? Is this just a codepen problem? I have been having lots of issues in the past relating to backgroundcolor on the web, both on codepen and JSFiddle, so that could be the reason. I don't think that this is the problem though because in another pen I got backgroundcolor setting to work only with JQuery.
Here is the javascript that is causing me problems:
$(document).ready(function() {
window.setInterval(function() {
moveRight('#1-1');
moveRight('#1-2');
}, 1000);
window.setTimeout(function() {
window.setInterval(function() {
moveLeft('#1-3');
moveLeft('#1-4');
moveLeft('#1-5');
}, 1000);
}, 500);
});
function moveRight(id) {
$(id).css("background-color", "#00094F");
$(id).animate({
marginLeft: "-=70",
marginTop: "-=50",
}, 250, function() {
$(id).animate({
marginLeft: "+=70",
marginTop: "+=50",
}, 250);
});
$(id).css("background-color", "#78FF81");
}
function moveLeft(id2) {
$(id).css("background-color", "#00094F");
$(id2).animate({
marginLeft: "+=70",
marginTop: "-=50",
}, 250, function() {
$(id2).animate({
marginLeft: "-=70",
marginTop: "+=50",
}, 250);
});
$(id).css("background-color", "#78FF81");
}
EDIT: My newest issue is that when I try to change the background colors before and after each animation call, the left three dots that call moveLeft don't do anything anymore, not even animate. Something is definitely amiss here, any ideas for this too?
Try placing it in a animate complete function:
//place this inside of your animate function as a property
complete:function() {
$(id).css("background-color", "#78FF81");
});
Related
I am creating a simple slot machine and currently using TileSprite to achieve the effects that I want - for the spinning. So far, everything works. However, after the timer stops the initial spin, I want to smoothly scroll the texture to the correct 'result' position:
R1TimerTrigger: function()
{
R1Scroll = false;
game.add.tween(SpriteReel[0].tilePosition).to( { y: R1Result }, 1000, Phaser.Easing.Bounce.Out, false);
}
There are some immediate problems, in that apparently the native tween does not recognize properties of children. Is there a way to solve this, or an alternative approach that does not use tween to achieve the result?
You code looks fine to me and the tween should work on the tile sprite as expected.
Are you starting the tween? You can start the tween automatically using 'true' as the 'autoStart' parameter
to(properties, duration, ease, autoStart, delay, repeat, yoyo)
game.add.tween(SpriteReel[0].tilePosition).to( { y: R1Result }, 1000, Phaser.Easing.Bounce.Out, true);
Working example here https://phaser.io/sandbox/edit/iTLritEj
Look in the Play and Create tabs
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
After having troubles with a jquery fisheye plugin I've decided to develop a similiar script by myself. (It's also a good practice).
Anyway , I wrote 2 jquery functions based on the Animate() function.
minimizeBubble
return the bubble to its default size
maximizeBubble
make the bubble bigger , higher and display another picture as well (a
title for that bubble)
jQuery.fn.maximizeBubble = function(){
$(this).animate({
marginTop: '-300px',
width: '300px',
}, {
duration: 200,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "inline");
}
});
}
jQuery.fn.minimizeBubble = function(){
$(this).animate({
//top: '+=5',
marginTop: '0',
width: '80px',
}, {
duration: 100,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "none");
}
});
}
I also wrote the next code:
I know that the .each() function in this case is not neccessery because
there's only one big bubble at a time.
$(document).ready(function() {
//First , the middle one will be big as default.
$('#auto_big').maximizeBubble();
//mouseOver - make it big , onMouseout - Stay Big (do nothing)
$('.dock-item2').mouseover(function() {
//mouseOver on another bubble- minimize the other one and maximize the current
$('.dock-item2').each(function(){
$(this).minimizeBubble();
});
$(this).maximizeBubble();
});
});
(A jsFiffle for my code: http://jsfiddle.net/T7gCL/1/)
The problem , as you can see at: http://jsfiddle.net/T7gCL/1/embedded/result/ that
when you move your mouse to the next bubble , all the bubbles are starting to "get crazy".
1.Do you know what's the reason for this behaviour?
2.How can I solve it?
3.do you have any suggestions of how to improve my code (for instance: instead of each())?
Part of the reason there is so much hopping around is that you're positioning the images absolutely and then resizing them. I'm not sure what the application calls for but I would try floating them for now. The animation behavior is like a chain reaction which makes me draw the hypothesis that when the image resizes it is propagating the onMouseover event to the images it is overlapping. The floating layout may fix this.
Update
This works better but might not be exactly what you're trying to do
$('.dock-item2').mouseenter(function(event) {
event.stopPropagation()
$(this).maximizeBubble();
});
$('.dock-item2').mouseleave(function(event) {
event.stopPropagation()
$(this).minimizeBubble();
});
You still need to rework the way you're organizing the images in their containing div
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!
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.