Loop functions, animate css rotation - javascript

Im trying to create a function that animate a transition and then once it has done this, animates the rotation back to its starting point and loops this infinitely.
I have the following only I cant get the animation working nor the return to default?
http://jsfiddle.net/QfeC2/
function drunk(){
$('div').css({'-webkit-transform':'rotate(1deg)'});
$('div').delay(4000).css({'-webkit-transform':'rotate(0deg)'});
}
setTimeout(function() { drunk(); }, 2000);

.delay() only works when you are using jquery animation, you must use setTimeout
function drunk() {
$('div').css({
'-webkit-transform': 'rotate(1deg)'
});
setTimeout(function () {
$('div').css({
'-webkit-transform': 'rotate(0deg)'
});
}, 4000);
}
setTimeout(function() { drunk(); }, 2000);
DEMO
Use setInterval for continous loop
setInterval(function(){drunk();},8000);
DEMO

If you're animating with css why not using pure CSS?
You can wrap the animation property in a Class and toggle that class in JS.
div {
-webkit-animation:anim 2s ease infinite;
}
#-webkit-keyframes anim
{
0 {-webkit-transform:rotate(0deg);}
50% {-webkit-transform:rotate(1deg);}
100% {-webkit-transform:rotate(0deg);}
}
Updated fiddle

see your updated fiddle:
http://jsfiddle.net/QfeC2/3/
function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('div');
// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
duration: 2000,
step: function(now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
},
complete: function(){
AnimateRotate(360);
}
});
}
AnimateRotate(360);
UPDATE
to rotate back after each cycle:
http://jsfiddle.net/QfeC2/9/
var boolDirection = true;
function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('div');
// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
duration: 2000,
step: function(now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
},
complete: function(){
if(boolDirection)
{
AnimateRotate(-360);
boolDirection = false;
}
else
{
AnimateRotate(360);
boolDirection=true;
}
}
});
}
AnimateRotate(360);

Related

jQuery animation setup callback throws error

I want to implement a jQuery animation callback method progress or step,
but in either case I'm getting the following error:
NS_ERROR_IN_PROGRESS: Component returned failure code: 0x804b000f (NS_ERROR_IN_PROGRESS) [nsICacheEntry.dataSize]
I searched a lot but not able to find anything in context, I am kind of stuck here, please suggest what could cause this error?
In fiddle i tried with step and progress and its working there , but not able to get it worked in my code, I am just looking, has some one faced such kind of error in jquery animation?
The sample code is:
this.taskHandle.find('img').stop(true, true).animate({
//todo//
top: vtop, // this.taskHandle.outerHeight(),
//'top': 0 - $('.target.upper').height(),
width: 0,
opacity: 0
}, {
duration: 2000,
step: function(){
console.log('I am called');
}
},
$.proxy(function() {
// some css clearing method
}, {
// some further actions after animation completes
})
);
You have some semantic errors going on here. I'm going to repost your code, formatted for easier reading:
this.taskHandle.find('img')
.stop(true, true)
.animate(
{
//todo//
top: vtop , // this.taskHandle.outerHeight(),
//'top' : 0 - $('.target.upper').height(),
width : 0,
opacity : 0
},
{
duration:2000,
step: function() {
console.log('I am called');
}
},
$.proxy(
function() {
// some css clearing method
},
{
// some further actions after animation completes
}
)
);
First: animate() doesn't accept 3 parameters (at least not those 3 parameters). I'm not sure what you are trying to do with your css clearing method, but anything you wan't to happen after the animation is complete should be in the complete method that you add right next to the step method.
Second: $.proxy() needs to have the context in which you want it to run as the second parameter, not some other"complete"-function.
So here is a slightly modified example which works. You can try it yourself in this fiddle.
var vtop = 100;
$('div')
.stop(true, true)
.animate(
{
top: vtop,
width: 0,
opacity : 0
},
{
duration: 2000,
step: function() {
console.log('I am called');
},
complete: function () {
alert('complete');// some further actions after animation completes
}
}
);
You could use Julian Shapiro's Velocity.js, which animations are (arguable) faster than jQuery and CSS (read this for more)
It allows you to use callbacks such as :
begin
progress
complete
like :
var vtop = 100;
jQuery(document).ready(function ($) {
$('div').find("img").velocity({
top: vtop,
width: 0,
opacity: 0
}, {
duration: 2000,
begin: function (elements) {
console.log('begin');
},
progress: function (elements, percentComplete, timeRemaining, timeStart) {
$("#log").html("<p>Progress: " + (percentComplete * 100) + "% - " + timeRemaining + "ms remaining!</p>");
},
complete: function (elements) {
// some further actions after animation completes
console.log('completed');
$.proxy( ... ); // some css clearing method
}
});
}); // ready
Notice that you just need to replace .animate() by .velocity()
See JSFIDDLE

jQuery animation callback called too fast

So I am trying to animate .load('content.html') function by doing this.
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
$('#main-container').load('./content/' + c + '.html');
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
It is pretty straight forward, I want to animate opacity to 0, load new content and animate opacity back to 1. The problem is that content loads immediately after function is called so content changes before 'opacity 0' happens. I tried also this piece of code
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
setTimeout(function() {
$('#main-container').load('./content/' + c + '.html');
}, 600);
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
But it is same result. Any hints?
I think it has something to do with .animation() event being asynchronous.
Both codes above, and both answers work just fine I had typo in my code (as whole) so I was calling .load() function before loadContent(c) itself, result was that content loaded immediately, animation started -> content loaded second time -> animation ended.
You need to pass your last animation as a callback function to load():
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300, function() {
$('#main-container').load('./content/' + c + '.html', function() {
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
Here's a Fiddle: http://jsfiddle.net/Lp728/
how about:
function loadContentCOMMAS(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300);
$('#main-container').promise().done(function () {
$('#main-container').load(c,function () {;
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
EDIT:
here is a FIDDLE

jquery fade then redirect

Alright, I maybe a bit to strung out from caffeine atm to figure this one out on my own, but i'm trying to figure out how to redirect visitors to a page after splash image has faded.
$(document).ready(
function
()
{$('.wrapper a img').hover(
function ()
{
$(this).stop().animate({ opacity: .4 } , 200);
settimeout(function(){window.location = '/blog';}, 200);
}
)});
It's not working and is drving me a bit nutt
.animate allows you to define a callback that will be invoked when the animation is complete:
$(this).stop().animate({ opacity: .4 } , 200, "swing", function() {
window.location = '/blog';
});
The third argument ("swing") is simply the default for that parameter.
An alternative syntax for the same is
.animate({ opacity: .4 }, {
duration: 200,
complete: function() { window.location = '/blog'; }
);
Finally, yet another way is to use a .promise that will be completed when the animation queue for the element is empty (i.e. all animations have ended):
.animate({ opacity: .4 } , 200)
.promise().done(function() { window.location = '/blog'; });

How to get image to pulse with opacity with JQuery

I am trying to get an image to change opacity smoothly over a duration of time. Here's the code I have for it.
<script type="text/javascript">
pulsem(elementid){
var element = document.getElementById(elementid)
jquery(element).pulse({opacity: [0,1]},
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() { alert("I'm done pulsing!"); }
})
</script>
<img src="waterloo.png" onmouseover="javascript:pulsem("waterloo")" border="0" class="env" id="waterloo"/>
Also, is there a way for this to happen automatically without the need of a mouseover? Thanks.
I'm assuming your code is for the jQuery pulse plugin: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/
If your above code is not working, then fix "jquery" to be "jQuery".
For starting it on page load, just do:
jQuery(function() {
jQuery('#yourImageId').pulse({
opacity: [0,1]
}, {
duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() {
alert("I'm done pulsing!");
}
});
Add an id to your image and you're golden.
});
To fire the animation of your own accord:
pulsate( $('#waterloo') );
revised code to continually pulsate (wasn't sure if this was what you're after) - the pulsate effect is relegated to it's own function so you can call it directly or in your event handler
<script type="text/javascript">
$(function() { // on document ready
$('#waterloo').hover( //hover takes an over function and out function
function() {
var $img = $(this);
$img.data('over', true); //mark the element that we're over it
pulsate(this); //pulsate it
},
function() {
$(this).data('over', false); //marked as not over
});
});
function pulsate(element) {
jquery(element).pulse({opacity: [0,1]}, // do all the cool stuff
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() {
if( $(this).data('over') ){ // check if it's still over (out would have made this false)
pulsate(this); // still over, so pulsate again
}
}});
}
<img src="waterloo.png" border="0" class="env" id="waterloo"/>
Note - to trigger events, you can use .trigger() or the helper functions, like
$('#waterloo').mouseover() // will fire a 'mouseover' event
or
$('#waterloo').trigger('mouseover');
this might be what you're looking for.
http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/
I personally do something like this to pulse when the mouse hovers over the image and return to full opacity on mouse out...
$(document).ready(function () {
function Pulse(Target, State) {
//Every 750ms, fade between half and full opacity
$(Target).fadeTo(750, State?1:.5, function() {Pulse(Target, !State)});
}
$("#ImageId").hover(function () {
$(this).stop()
Pulse(this);
}, function () {
$(this).stop(false, true).fadeTo(200, 1); //200ms to return to full opacity on mouse out
});
});

I'm using the jQuery .scroll() function, why can't I override its effects with another function?

I'm using the jQuery .scroll() function to make a certain element fade to 0.2 opacity. Since there is no native "scrollstop" indicator, I decided to make the element fade back to 1.0 opacity on hover. However, it doesn't work.
Here's my code:
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(
function() {
$(this).animate({ opacity: 1 }, 500);
}, function() {
$(this).animate({ opacity: 1 }, 500); // just to be safe?
}
);
});
When I scroll, the #navlist element fades, but when you hover over it nothing happens. But if you refresh the page when you're half way down, the element automatically fades as soon as you refresh, before I've scrolled, and if you try to hover to fade it back in, nothing happens.
Any thoughts?
try to stop animation first
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").stop().animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
},
function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
}
);
The problem is that the scroll event, gets called multiple times during a single scroll (10-20 per a single mouse wheel scroll), so #navlist gets a lot of animate events of 2 seconds.
I am not exactly sure what's going on with jQuery, but when you hover it, even though the opacity: 1 animations run, they end up running the queued #navlist animations.
I solved the problem using a sort of flag, I bet you can find something more efficient.
$(document).ready(function(){
var isAnimationBusy = false;
$(window).scroll(function(){
if(isAnimationBusy) return;
isAnimationBusy = true;
$("#navlist").animate(
{ opacity: 0.2 }, 2000,
function(){ isAnimationBusy = false; }
);
});
$("#navlist").hover(
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
},
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
}
);
});
Edit: The animation stop will solve the problem, I still believe you should control how many times you call the animate event. There could be a performance hit.

Categories

Resources