Develop Reference

Is it possible to implement a 'double-jump' feature without the use of html canvas?

I'm making a game for a project on my course and am wondering how to make a 'character' perform a double-jump(a second mid-air jump). It is an endless-runner game where the player is on a fixed position on the screen and must jump over and slide under obstacles as they appear on the screen. I currently have my jump and slide functions working though they need some fine-tuning to make more precise and fun in use.
I've tried using .stop() to cancel the jump animation and perform another jump.
Here's my code in a jsbin to look at:
http://jsbin.com/yekarel/edit?html,js,output
Really only looking to see if this is possible and how to go about doing it, though any suggestions on tidying up the code is still welcome. Thanks.
Edit: I'm trying to avoid the use of canvas in this project so only really looking for a solution that doesn't involve canvas.

I think this can be accomplished by adding var jumpCount = 0; to the variable declarations at the beginning, and then making the following changes (in which case you can remove the doubleJump() and fallDown2() functions):
// jump function
$(this).keyup(function(e) {
if(jumpCount < 2 && (e.keyCode === 0 || e.keyCode === 32)) {
jumpCount++;
$($character).animate({ top: '-=120px' }, {
duration: 350,
easing: 'linear',
complete: function() {
fallDown();
}
});
}
});
function fallDown() {
$($character).animate({top: '+=120px'}, {
duration: 180,
easing: 'linear'
});
jumpCount--;
}

JQuery can't call css method twice at a time?

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");
});

Multiple hover instances jQuery

I have a div to animate from the top to the bottom of another div. I'm currently playing w/ mouseenter/leave and JS animations w/ easing where its original state is up/top. I want to hover/mouseenter and have it move down and stay down if I mouseleave/hover off. When I hover again it will animate back to the top/start.
I initially used mouseenter/leave which obviously doesn't do what I need as I would like the state to remain the same upon mouseleave. So what function would be best for this need? I'm still learning the terminology and am stumbling over how to better phrase the question.
Code:
function init() {
mouseenter: function(){
$(".ltrP").stop(true, true).animate({
marginTop:"170px"
},
{
duration: 1000,
easing: "easeOutBounce"
});
},
mouseleave: function(){
$(".ltrP").stop(true, true).animate({
marginTop: "0px"
},
{
duration: 1000,
easing: "easeInBounce"
});
}
});
}
window.onload = init;

I've edited your piece of code, see the comments for explanation:
$(document).ready(function(){ // Runs when document is loaded
$(".ltrP").mouseenter(function(){ // Mouseenter event on the given object (.ltrP)
var goTo = $(this).css("marginTop") == '0px' ? 170 : 0; // When the current margin-top is 0px animate to 170px, otherwise animate it back to 0px
$(this).stop(true,false).animate({ // Changed the stop(true, true) to stop(true, false), looks nicer in my opinion
marginTop: goTo // Animate to the just set variable
}, 1000);
});
});
And see here a demo: http://jsfiddle.net/hnDmt/
(And the easing "easeInBounce" was not working for me, so I removed it. (Maybe a jQuery UI easing?))

You can rewrite your code this way:
$(document).ready(function(){
init();
});
function init() {
$.hover(function(){
$(".ltrP").stop(true, true).animate({
marginTop:"170px"
},
{
duration: 1000,
easing: "easeOutBounce"
});
},
function(){
$(".ltrP").stop(true, true).animate({
marginTop: "0px"
},
{
duration: 1000,
easing: "easeInBounce"
});
});
}

There are lots of ways to do this. Maybe the easiest to to conceptualize is by adding a class to the animated item. You want to write two separate mouseenter functions.
For the first function, trigger your down animation, and add a class to the entered item. Call the class "moveddown" or something obvious.
Then, write a second mouseenter function. When an item with the class is mousentered, animate it up, and remove the class.
Forget about jQuery hover for this. It's just a wrapper for mouseenter/mouseleave. It can cause problems. The jQuery docs warn about it. It's usually better to write mouseenter and mouseleave functions separately, especially when you're trying to do something tricky, like this.

How do I stop a bouncy JQuery animation?

In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.
The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)
Okay, now for the code. Here's the basic JQuery that I'm using:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
I've also recreated the behavior in a JSFiddle.
Any ideas on what's going on? :)
==EDIT== UPDATED JSFiddle

It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.
http://jsfiddle.net/W5EsJ/18/
If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.
You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)
Update
I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});

You could use .stop() and also use the outer container position
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
​
DEMO
Hope this helps

Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.
Add following piece of code to check if the div is already 'animating':
if ($(this).is(':animated')) {
return;
}
Code: http://jsfiddle.net/W5EsJ/2/
Reference:http://api.jquery.com/animated-selector/

I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover

The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne.net/brian/resources/jquery.hoverIntent.html
If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent

jQuery Resizing Object

I am trying to get this resizing object to work properly.
When MouseDown (holding), object resizes to 80px.
When release, I want the object to resize back to normal.
Problem:
As the object resizes from 100px to 80px on MouseDown, it may happen that the mouse is no more in the object itself, so releasing the mouse won't trigger the "resize back to normal" animation again.
That's why I tried to do a workaround with this:
if (global.mouseup) and ($('#myimage').width('80px'))
Complete code at:
http://jsfiddle.net/G8Ste/568/
Thanks for any help !

Bind a mouseup handler to the document that resizes the img back to normal:
$('#myimage').mousedown(function() {
var img = $(this);
img.stop().animate({
width: ['80px', 'swing'],
height: ['80px', 'swing'],
}, 50, 'swing');
$(document).one("mouseup", function(){
img.css({width:"",height:""});
});
});
Working demo: http://jsfiddle.net/G8Ste/569/
A couple of notes about your code.
You don't have a global variable defined, so you are getting an error there.
Instead of and, you must mean &&.
Edit: You can, of course, use the animation as you have in your original code. Demo here: http://jsfiddle.net/G8Ste/574/. The limitation of that is that you have to duplicate code, specifying the default width and height in the CSS and in the JavaScript. You can resolve that any number of ways, such as using the technique I describe in this answer, or using jQuery-UI's .switchClass() and related methods. Example using jQuery-UI:
$('#myimage').mousedown(function() {
var img = $(this);
img.stop().addClass("small", 50);
$(document).one("mouseup", function(){
img.stop().switchClass("small", "large", 150, function() {
img.removeClass("large", 1000);
});
});
});
Demo: http://jsfiddle.net/G8Ste/576/