Develop Reference

Simulate an object falling over with jQuery

I'm simulating a bowling game in jQuery. So, I throw the ball (through animate function) and when it hits a pin I simulate it falling over (also through animate function). But I can only make it rotate. I want it to fall over in place, to the left or to the right. Like this. This is the jQuery code for the pin animation:
this.animation = function (pinID) {
var rdm = ((Math.random()*10)+1);
var degree;
if (rdm <= 5)
degree = -90;
else
degree = 90;
$(pinID).animate({ deg: degree },
{
duration: 1000,
step: function (now) {
// In the step-callback (that is fired each step of the animation),
// the pin will rotate to the current degree of the animation
$(pinID).css({
transform: 'rotate(' + now + 'deg)'
});
},
complete: function () {
// When the animation is complete, removes the pin from play
$(pinID).css({
"left": -200, "top": -200
});
}
});
}
I tried to have a left and top in the beginning of the animate function the it just simulated a weird movement.
I'd appreciate it if anyone could help me. Thanks.
EDIT Here's the result (thanks to Zs V):
this.animation = function (pinID) {
if (knockedPins.indexOf(pinID) == -1) {
var rdm = ((Math.random() * 10) + 1);
var degree;
var transFormOrigin;
if (rdm <= 5) {
degree = -90;
transFormOrigin = '0% 100%';
}
else {
degree = 90;
transFormOrigin = '100% 100%';
}
$(pinID).css({ "transform-origin": transFormOrigin });
knockedPins.push(pinID);
$(pinID).animate({ deg: degree },
{
duration: 1000,
step: function (now) {
// In the step-callback (that is fired each step of the animation),
// the pin will rotate to the current degree of the animation
$(pinID).css({
transform: 'rotate(' + now + 'deg)'
});
},
complete: function () {
// When the animation is complete, removes the pin from play
$(pinID).css({
"left": -200, "top": -200
});
}
});
}
}
I added the transform-origin property and had to make use of an array to store the ids of the pins that were already knocked, otherwise it would shake until it was put to rest. hehe

You have to rotate the object (the picture) around its corner instead of the center. Here it is a discussion how to do that: https://stackoverflow.com/a/6633676/6624619

Click to rotate goes in wrong direction at first

I am trying to have elements in a canvas rotate either clockwise or counter-clockwise depending on which arrow is clicked. The problem is that when you rotate one way and then another, the first click will go in the previously clicked arrow's direction on the first click.
ie. click rotate clockwise and it rotates clockwise. Then click rotate counter-clockwise and the first time you click it, the effected elements rotate clockwise on the then counter-clockwise on the second and each click afterwards. This happens in both directions.
Hope that's clear. Here, there's not much to it. Rotator code at the end:
$(document).ready(function(){
counter = 0;
//draggable
$(".drag").draggable({
helper:'clone',
containment: 'frame',
//first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter++
$(objName).css({"left":pos.left,"top":pos.top});
$(objName).removeClass("drag");
//existing dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});
//droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9][0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");
draggedNumber = ui.helper.attr('id').search(/drag([0-9][0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)
$("#clonediv"+counter).addClass(itemDragged);
$("ol").append($("div").attr("data-piece") + "<br>" );
}
}
});
//trash can
$("#trash").droppable({
greedy: 'true',
accept: function() { return true; },
drop: function (event, ui) {
tolerance: 'fit', $(ui.draggable).remove();
$("ol").detach();
}
});
//rotator
var angle = 22.5;
$('#spin').click(function() {
$('.drag').css ({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
angle+=22.5;
});
$('#spin2').click(function() {
$('.drag').css ({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
angle+=-22.5;
});
});
Any help is much appreciated!

Try moving the angle += ... lines before the $('.drag').css(...) lines.
Cleaned up a little, and starting at angle = 0:
// rotator
var angle = 0;
function rotateTo(angle) {
var value = 'rotate(' + angle + 'deg)';
$('.drag').css({
'-webkit-transform': value,
'-moz-transform': value,
'-o-transform': value,
'-ms-transform': value,
});
}
$('#spin').click(function() {
angle += 22.5;
rotateTo(angle);
});
$('#spin2').click(function() {
angle -= 22.5;
rotateTo(angle);
});

Continuous rotate image onclick of button

To display Image I used colorbox..In that I have add rotate-left and rotate-right to rotate the image..
The code is:
var rotate_right = document.getElementById('cboxRight');
$(rotate_right).on('click', function () {
var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
cboxphoto.setAttribute('-ms-transform', 'rotate(90deg)');
});
var rotate_left = document.getElementById('cboxLeft');
$(rotate_left).on('click', function () {
var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
cboxphoto.setAttribute('-ms-transform', 'rotate(270deg)');
});
It rotate 90deg if I click again on rightrotate button then it wont work..I want to rotate it again when click on button

You're only ever rotating to 90 or 270 degrees. When you click again, it doesn't move as it is already rotated to that angle.
Keep track of the current rotation instead and set the attribute to that value plus or minus 90deg - you can probably clean up the code a bit as well, but something like this fiddle: http://jsfiddle.net/w6ho689e/
var degrees = 0;
$("#cboxRight").on('click', function () {
var $cboxphoto = $('.cboxPhoto');
degrees += 90;
$cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});
$("#cboxLeft").on('click', function () {
var $cboxphoto = $('.cboxPhoto');
degrees -= 90;
$cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
$cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});

Javascript - Click to rotate image infinitely and click again to stop

I've been trying to figure out how to get this script to rotate an image infinitely onclick and then stop it when you click it again. Can anyone modify it to get it to do that?
$(function() {
var $rota = $('.spin'),
degree = 0,
timer;
function rotate() {
$rota.css({ transform: 'rotate(' + degree + 'deg)'});
// timeout increase degrees:
timer = setTimeout(function() {
++degree;
rotate(); // loop it
},5);
}
rotate(); // run it!
});

you could create a bool to determine if the element has been clicked, change it on click and stop the process if the click has happened.
$(function() {
var $rota = $('.spin'),
degree = 0,
clicked = false,
timer;
$rota.on('click', function() { clicked = true; return false; } );
function rotate() {
if ( clicked )
$rota.css({ transform: 'rotate(' + degree + 'deg)'});
// timeout increase degrees:
timer = setTimeout(function() {
++degree;
rotate(); // loop it
},5);
}
rotate(); // run it!
});

Try using setInterval and clearInterval instead of setTimeout:
function rotate() {
$rota.css({ transform: 'rotate(' + degree + 'deg)'});
++degree;
}
var loop;
$rota.click(function() {
if(loop) {
clearInterval(loop);
loop = false;
}
else {
loop = setInterval(rotate, 5);
}
});
You can read up on setInterval here

Try
$(function() {
var $rota = $('.spin')
$rota.click(function(){
var $this = $(this);
if($this.data('rotating')){
clearInterval($this.data('rotating'));
$this.data('rotating', false)
} else {
$this.data('rotating', setInterval(function(){
var degree = $this.data('degree') || 0;
$this.css({ transform: 'rotate(' + degree + 'deg)'});
$this.data('degree', ++degree)
}, 5));
}
});
});
Demo: Fiddle

$(function() {
var $rota = $('img'), degree = 0, timer, enabled;
var rotate = function() {
timer = setInterval(function() {
++degree;
$rota.css({
transform: 'rotate(' + degree + 'deg)'
});
},5);
};
$rota.on('click', function(){
enabled = !enabled;
enabled ? rotate() : clearInterval(timer);
});
});

How to add a 3 second delay to this function

My goal with this code is to create an effect of leaves blowing away 3 seconds after page load, but currently I am unable to create a delay. Perhaps its because the code format. I made i quick jsfiddle to demonstrate what I have so far.
http://jsfiddle.net/vXpDk/
So my question is how to create a delay of the function so that it doesn't start to rotate and slide for 3 seconds...and if it is possible to to create diagonal paths instead of horizontal and vertical.
Here's the code from the jsFiddle:
var $elie = $("#leaf1"), degree = 0, timer;
rotate();
function rotate() {
$elie.delay(2000)
.css({ WebkitTransform: 'rotate(' + degree + 'deg)'})
.animate({ "left": "+=800px" }, 2000)
.fadeOut(100);
$elie.delay(2000)
.css({ '-moz-transform': 'rotate(' + degree + 'deg)'})
.animate({ "left": "+=800px" }, 2000)
.fadeOut(100);
timer = setTimeout(function() {
++degree;
rotate();
},0);
}

Like this? http://jsfiddle.net/L69Ud/
var $elie = $("#leaf1"), degree = 0;
$elie.animate({ "left": "+=800px" }, 5000).fadeOut(100);
setTimeout(rotate, 3000);
function rotate() {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
setTimeout(function() {
++degree; rotate();
}, 0);
}
and if it is possible to to create diagonal paths instead of
horizontal and vertical.
Animate left and top at the same time http://jsfiddle.net/L69Ud/1/
The only modification here is
$elie.animate({ left: "+=500px", top: "+=500px" }, 5000).fadeOut(100);
How would you code this so that the div does not move at all for 3 seconds then begins to rotate and slide at the same time?
http://jsfiddle.net/L69Ud/3/
var $elie = $("#leaf1"), degree = 0;
setTimeout(function() {
$elie.animate({ left: "+=500px", top: "+=500px" }, 5000).fadeOut(100);
rotate();
}, 3000);
function rotate() {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
setTimeout(function() {
++degree; rotate();
}, 0);
}