Develop Reference

Two if statements. Both work. Only one prints

I'm trying to rotate a fixed image in sync with fullpage.js and it works for the most part.
In order to prevent unwanted rotation I have to stack css rotate() values.
It works when I scroll down and it stacks as I wanted (ie. 180, 360, 540, ..)
It doesn't work when I scroll up.
I tried to use alerts to identify if the calculation is done, there seems to be no problem on the stacking, but scroll up portion of the code simply doesn't print to the HTML document.
Here's my code;
var rotation = 0,
rotationInc = 180,
miniLogo = $('#mini-logo');
$(document).ready(function () {
$('#home').fullpage({
verticalCentered: false,
scrollingSpeed: 300,
onLeave: function (index, nextIndex, direction) {
if (direction == 'down') {
rotation += rotationInc;
setTimeout(function () {
miniLogo.addClass('enlarge');
}, 400);
miniLogo.each(function () {
alert(rotation);
});
setTimeout(function () {
miniLogo.css({
'transform': 'rotate(' + rotation + 'deg)'
});
}, 800);
setTimeout(function () {
miniLogo.removeClass('enlarge');
}, 1200);
}
if (direction == 'up') {
rotation -= rotationInc;
setTimeout(function () {
miniLogo.addClass('enlarge');
}, 400);
miniLogo.each(function () {
alert(rotation);
});
setTimeout(function () {
miniLogo.css({
'transform': 'rotate(' + rotation + 'deg);'
});
}, 800);
setTimeout(function () {
miniLogo.removeClass('enlarge');
}, 1200);
}
}
});
});
The first if statement works perfectly. The second gives the alert I wanted but doesn't print the reduced degree on the html.
Any help would be much appreciated, I'm sure I've done a rookie mistake.

Try this :
rotation = 0;
rotationInc = 180;
miniLogo = $('#mini-logo');
$(document).ready(function () {
$('#home').fullpage({
verticalCentered: false,
scrollingSpeed: 300,
onLeave: function (index, nextIndex, direction) {
var rotation = (direction == 'down')
? rotation += rotationInc
: rotation -= rotationInc;
setTimeout(function () {
miniLogo.addClass('enlarge');
}, 400);
miniLogo.each(function () {
alert(rotation);
});
setTimeout(function () {
miniLogo.css({
'transform': 'rotate(' + rotation + 'deg)'
});
}, 800);
setTimeout(function () {
miniLogo.removeClass('enlarge');
}, 1200);
}
}
});
});

Change rotate animation position

I am trying to implement rotate animation its working but I want to change the div position. Here is my code:-
$(function(){
var el=$('div');
el.animate({ deg: 180 }, {
duration: 1000,
step: function (now) {
el.css({
transform: 'rotate(' + now + 'deg)'
});
},
complete: function () {
},
});
});
Fiddle Demo
I want this position(now its first but I want second):-
Thanks for your hepl

Use translateY(-100%)
$(function(){
var el=$('div');
el.animate({ deg: 180 }, {
duration: 1000,
step: function (now) {
el.css({
transform: 'rotate(' + now + 'deg) translateY(-100%)'
});
},
complete: function () {
},
});
});
DEMO

$(function(){
var el=$('div');
var topik = $('div').css('top');
el.animate({ deg: 180 }, {
duration: 1000,
step: function (now) {
el.css({
transform: 'rotate(' + now + 'deg)',
top : topik+'500px',
});
},
complete: function () {
},
});
})
Dont thank me ;););)

getting a random animation totally random

I have created a random fishes animation but at some point (about 10sec) from the beginning, my fishes Cling to the right, i want them to keep moving in random all over the area, any idea?
here is the fiddle link: http://jsfiddle.net/832Fx/1/
jquery code:
$.fn.rotate = function (degrees) {
var self = $(this);
self.transition({
rotateY: degrees + 'deg'
}, 5000);
};
var animeVars = {
maxPixelsPerSecond: 50,
minPixelsPerSecond: 10,
topMargin: 0,
bottomMargin: 400,
leftMargin: 0,
rightMargin: 400
};
function topFlip(obj) {
var speed = $(obj).data('speed') ? (1 / parseFloat($(obj).data('speed'))) * 1000000 : 300;
$(obj).find('.top_fin, .top_fins').transition({
rotate: '+=25deg',
x: '+=10'
}, speed, function () {
$(obj).find('.top_fin, .top_fins').transition({
rotate: '-=25deg',
x: '-=10'
}, speed, function () {
topFlip(obj);
});
});
}
function tailFlip(obj) {
var speed = $(obj).data('speed') ? (1 / parseFloat($(obj).data('speed'))) * 1000000 : 300;
$(obj).find('.tail_fin, .tail_fins').transition({
rotateX: '-=25deg'
}, speed, function () {
$(obj).find('.tail_fin, .tail_fins').transition({
rotateX: '+=25deg'
}, speed, function () {
tailFlip(obj);
});
});
}
function animateFish(obj) {
var heading = $(obj).data('heading');
if (!heading) heading = 'left';
var rotation = 0;
var currentCoords = {
top: parseInt($(obj).css('top').replace(/[^-\d\.]/g, ''), 10),
left: parseInt($(obj).css('left').replace(/[^-\d\.]/g, ''), 10)
};
var newCoords = {
top: Math.random() * (animeVars.topMargin - animeVars.bottomMargin + 1) + animeVars.bottomMargin,
left: Math.random() * (animeVars.leftMargin - animeVars.rightMargin + 1) + animeVars.rightMargin
};
if (currentCoords.left < newCoords.left && heading != 'right') {
$(obj).rotate(180);
$(obj).data('heading', 'right');
console.log('swimming right');
} else if (currentCoords.left > newCoords.left && heading != 'left') {
$(obj).rotate(0);
$(obj).data('heading', 'left');
console.log('swimming left');
}
var totalMovement = Math.sqrt(Math.pow(currentCoords.left - newCoords.left, 2) + Math.pow(currentCoords.top - newCoords.top, 2));
console.log('Total pixels to move: ' + totalMovement);
var pps = Math.floor(Math.random() * (animeVars.maxPixelsPerSecond - animeVars.maxPixelsPerSecond)) + animeVars.maxPixelsPerSecond;
var speed = totalMovement / pps * 1000;
$(obj).data('speed', speed);
$(obj).animate({
top: newCoords.top,
left: newCoords.left
}, speed, function () {
animateFish(obj);
});
}
$(document).ready(function () {
$('.loop ').each(function () {
animateFish(this);
topFlip(this);
tailFlip(this);
});
});

Here is how I would fix this: http://jsfiddle.net/BaliBalo/832Fx/2/
I just added
var $wnd = $(window);
$wnd.resize(function() {
animeVars.rightMargin = $wnd.width();
animeVars.bottomMargin = $wnd.height();
}).resize();
at the end of your code, and changed the algorithm a bit to take in account fishes size:
var w = $(obj).width();
var h = $(obj).height();
var newCoords = {
top: Math.random() * (animeVars.topMargin - animeVars.bottomMargin + h + 1) + animeVars.bottomMargin - h,
left: Math.random() * (animeVars.leftMargin - animeVars.rightMargin + w + 1) + animeVars.rightMargin - w
};
However, please note that many optimizations could be done, like caching jQuery objects in variables rather than calling the $ function every time.

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

Ken Burns effect with nivo slider

Has anyone set up a nivo slider to pan each image (aka Ken Burns effect)? I'm trying to implement it and it's kinda tricky!

Actually, I got my implementation working!
I have a panning function loop.. something like this:
function ken_burns_loop(el) {
$(el)
.animate({
'background-position-x': '40%',
'background-position-y': '60%'
}, 8000, 'linear')
.animate({
'background-position-x': '30%',
'background-position-y': '40%'
}, 8000, 'linear')
.animate({
'background-position-x': '70%',
'background-position-y': '70%'
}, 8000, 'linear', function() { ken_burns_loop(el); });
}
And I'm initializing nivo slider like this:
$('#welcome-slider').nivoSlider({
effect: 'fade',
slices: 1,
directionNav: false,
afterChange: function() {
$('#welcome-slider, .nivo-slice').stop(true);
ken_burns_loop('#welcome-slider, .nivo-slice');
}
});
ken_burns_loop('#welcome-slider, .nivo-slice');
I'm still working out some problems with positioning.

Source & Demo
Add this to your JS:
if(currentEffect === 'kenburns'){
createZoom(slider, settings, vars);
zoom = $('.nivo-zoom:last', slider);
var delta = (8 + Math.random() * 2) / 100;
var neww = zoom.width() * (1 + delta);
var newh = zoom.height() * (1 + delta);
var x = delta * zoom.width(); //Math.random()*(neww-zoom.width());
var y = delta * zoom.height(); //Math.random()*(newh-zoom.height());
var zoomdir = Math.round(Math.random() * 4);
zoom.animate({ opacity:'1.0'}, {easing:'linear',duration:settings.pauseTime*2/3});
if(zoomdir == 1) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',top: '-'+y+'px'},{easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 2) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',top: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else if(zoomdir == 3) {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',right: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
} else {
zoom.find('img').animate({ height:newh+'px',width:neww+'px',left: '-'+x+'px',bottom: '-'+y+'px'}, {easing:'linear',duration:settings.pauseTime*4/3, complete: function(){ slider.trigger('nivo:animFinished'); }});
}
if($('.nivo-zoom', slider).length > 2) $('.nivo-zoom:first', slider).remove();
}