Develop Reference

transform function not working angular 5

I try to call angular function in ngAfterViewInit()
ngAfterViewInit() {
this.gagSlider();
}
gagSlider() function
gagSlider(){
$.fn.animateRotate = function(angle, duration, easing, complete) {
alert(1);
return this.each(function() {
var $elem = $(this);
$({deg: 0}).animate({deg: angle}, {
duration: duration,
easing: easing,
step: function(now) {
$elem.css({
transform: 'rotate(' + (-90 + ((90 * 180) / 100)) + 'deg)'
});
},
complete: complete || $.noop
});
});
};
$('.meter-clock').animateRotate(0);
}
I am getting alert successfully but rotate not working

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

New random number jQuery

Here's my code
(function ($) {
$.fn.snow2 = function (options) {
var $flake = $('<a style="text-decoration: none;" href="/flake"><div id="flake" /></a>').css({
'position': 'absolute',
'top': '-50px',
'z-index': '100'
}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize: 30,
maxSize: 50,
newOn: Math.floor(Math.random() * 14000) + 7000,
flakeColor: "#CE1126"
},
options = $.extend({}, defaults, options);
var interval = setInterval(function () {
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake
.clone()
.appendTo('body')
.css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
})
.animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function () {
$(this).remove()
}
);
}, options.newOn);
};
})(jQuery);
I am trying to get it to spit out a snow flake at a random interval like 7000 and 14000 milliseconds, the problem is when I call the function it gets a random number between 7000 and 14000 and uses that same value over and over again. So say it returns 12806, it will spit out a snow flake every 12806 milliseconds. I want a new number each time. How would I go about accomplishing this? I cannibalized this code from something kinda different and am not very experienced with JavaScript or jQuery. Any help is appreciated.

The problem is setInterval, which does exactly what you are complaining about. I think you'd rather use setTimeout. From the Mozilla Developer Network:
setTimeout() calls a function or executes a code snippet after specified delay.
setInterval() calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function.

Yes I would use setTimeout and call the function itself with a new timeout value. Also I would set newOn to a function instead of a variable since it will only be calculated once as a variable.
See if this fiddle behaves like you want: http://jsfiddle.net/e9KE9/1/
In the fiddle I set the first Timeout to 0 so that the first would appear immediately.
P.s.s this feels more like snow: http://jsfiddle.net/e9KE9/2/ Pretty cool idea!
$.fn.snow2 = function (options) {
var $flake = $('<a style="text-decoration: none;" href="/flake"><div id="flake" /></a>').css({
'position': 'absolute',
'top': '-50px',
'z-index': '100'
}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize: 30,
maxSize: 50,
newOn: function(){return Math.floor(Math.random() * 14000) + 7000},
flakeColor: "#CE1126"
},
options = $.extend({}, defaults, options);
function newFlake() {
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake
.clone()
.appendTo('body')
.css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
})
.animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function () {
$(this).remove()
}
);
setTimeout(newFlake, options.newOn());
};
setTimeout(newFlake, options.newOn());
}(jQuery);

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.

jquery : how to fix quick sliding (carousel)?

I have build a slider using jQuery which works fine except a small issue.
The slider moves quickly before the present one complete its move.
Especially the second and third slide move have the issue
Does any one have solution or alternative to fix this issue ?
$.fx.speeds._default = 1000;
function slider(container) {
var currPg = null,
firstPg = null;
container.find('> *').each(function (idx, pg) {
pg = $(pg);
var o = {
testimonial: pg.find('> .testimonial'),
thumb: pg.find('> .testimonial-thumb'),
pg: pg
};
o.pg.css({
position: 'absolute',
width: '100%',
height: '100%',
});
if (idx > 0) {
o.pg.css({
opacity: 0,
'z-index': -1
});
o.testimonial.css({
'margin-left': '100%'
});
o.thumb.css({
'bottom': '-100%'
});
} else {
firstPg = o;
}
o.prev = currPg;
if (currPg) {
currPg.next = o;
}
currPg = o;
});
firstPg.prev = currPg;
currPg.next = firstPg;
currPg = firstPg;
this.advance = function advance(duration) {
console.log("advance!", this);
var dur = duration || $.fx.speeds._default;
var dur2 = Math.ceil(dur / 2);
var dh = container.height();
var dw = container.width();
var nextPg = currPg.next;
nextPg.pg.css({
opacity: 1,
'z-index': null
});
var _pg = currPg;
currPg.testimonial.stop().animate({
'margin-left': -dw
}, dur, function () {
_pg.pg.css({
opacity: 0,
'z-index': -1
});
_pg = null;
});
nextPg.testimonial.stop()
.css({
'margin-left': dh
})
.animate({
'margin-left': 0
}, dur);
currPg.thumb.stop().animate({
'bottom': -dh
}, dur2, function () {
nextPg.thumb.stop()
.css({
'bottom': -dh
})
.animate({
'bottom': 0
}, dur2);
nextPg = null;
});
currPg = nextPg;
}
}
var s = new slider($('#banner'));
function scheduleNext() {
setTimeout(function () {
s.advance();
scheduleNext();
}, 5000);
}
scheduleNext();
Demo http://jsfiddle.net/sweetmaanu/Pn2UB/13/

You're setting the margin-left to the containers height at this point. Fixing this seemed to fix it for me.
nextPg.testimonial.stop()
.css({
'margin-left': dh
})
.animate({
'margin-left': 0
}, dur);
should be
nextPg.testimonial.stop()
.css({
'margin-left': dw
})
.animate({
'margin-left': 0
}, dur);