Strange jquery animation behavior - javascript

The website uses a "black opacity" filter made with this:
/* Body black hover */
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 1000);
});
});
The problem I have is that I wanted to make a little animation when the user enters to "SOBRE NOSALTRES" (click upper menu to enter the page).
As you can see it animates "well" but not at all, sometimes if you go to "PRODUCTES" and back to "SOBRE NOSALTRES" the animation get's stuck at 98% width. It's kind of strange, why does it happens?
here it's a screenshot of the error:
http://webkunst.comeze.com/test/3.png
and this is the script i'm using to make the animation on NOSALTRES page:
<script>
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
$('li#nosaltres').addClass('active')
});
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 500);
});
</script>

The problem occurs when you hover in the <body> when the PRODUCTES page is loading since you call $("#bg_hover").stop(); in the first line of $("body").hover(function() {}); which stops all animation, including the animation that is reducing the width to 80%.
I can reproduce the problem by clicking on SOBRE NOSALTRES, then moving the mouse to the in and out of the browser window quickly.
I would not add the hover effect to the <body> until the initial resizing to 80% is finished, for example by adding an anonymous function to call once the animation is complete.
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800, function() {
$('li#nosaltres').addClass('active');
$("body").hover(function() {
$("#bg_hover").stop().animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop().animate({ opacity: 0 }, 500);
});
});

Dont split it into two lines:\
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
Instead, use:
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);

Related

Div is not rotating around its centre using jquery keyframes

I have two wheels divs. The wheels should rotate around their centre of origin but instead, they are doing a circular motion as shown below:
This is the CSS code for the wheel:
.wheel1 img{
width: 210px;
position: relative;
top:-320px;
left:42px;
/*animation: wheelRotation linear .99s infinite;*/
}
.wheel2 img{
width: 225px;
position: relative;
top: -540px;
left: 255px;
/*animation: wheelRotation linear .99s infinite;*/
}
I am using jQuery keyframes to enable CSS animation from javascript. For the wheels, I am using wheelRotation keyframe with 360deg rotation angle.
Below is how I add the animation sequence in JS:
$.keyframe.define([{
name: 'carMove',
'100%': {
'transform': 'translateX(-500vw)'
}
}, {
name: 'wheelRotation',
'100%': {
'transform': 'rotate(360deg)'
}
}, {
name: 'shake',
'0%': {
'transform': 'translateY(-5px)'
},
'50%': {
'transform': 'translateY(5px)'
},
'100%': {
'transform': 'translateY(-5px)'
}
}]);
});
and this is how the animation is played:
function play(animation) {
$('.track').resetKeyframe(function() {
switch (animation) {
case 'normal':
$('.wheel1').playKeyframe({
name: 'wheelRotation',
duration: "5000ms",
timingFunction: 'linear',
iterationCount: 'infinite'
});
$('.wheel2').playKeyframe({
name: 'wheelRotation',
duration: "5000ms",
iterationCount: 'infinite',
timingFunction: 'linear'
});
$('.track').playKeyframe({
name: 'carMove',
duration: "13s",
timingFunction: 'linear',
iterationCount: 'infinite',
direction: 'normal',
fillMode: 'forwards'
});
$('.car').playKeyframe({
name: 'shake',
duration: "3s",
timingFunction: 'linear',
iterationCount: 'infinite',
direction: 'normal',
fillMode: 'forwards'
});
break;
}
})
}
the wheel and track animation are fine, but the wheel are not rotating around their centre of origin. Why is this happening? I am not sure where the problem is coming from. Any help would be appreciated.
I solved the problem. Below is the solution:
I had to make sure that the div position is set when the animation starts as shown in the code below and removes the position: relative; from the CSS code. By including $('.wheel1').css({....}) and $('.wheel2').css({....}), I was able to remove all the CSS code for .wheel1 and .wheel2 as they are not necessary anymore.
function play(animation) {
$('.wheel1').css({'width': '210px','top': '-303px','left': '420px','position': 'relative','transform-origin': 'center'});
$('.wheel2').css({'width': '210px','top': '-485px','left': '195px','position': 'relative','transform-origin': 'center'});
}

Animation complete not called JavaScript DOM

I am trying to animate an image with a completion function. The animation works fine but the complete property is not called. I tried looking around and didn't find any result on the matter that says that what i'm doing is wrong. I tried on Chrome and Firefox I am using the code below
document.getElementById("myImageId").animate([{
transform: 'translateY(0px)'
},
{
transform: 'translateY(-300px)'
}
], {
duration: 300,
complete: function () {
alert('end ani')
}
});
Element.animate() returns a Animation object, and you can attach an event handler for finish to the object:
var animation = document.querySelector('#myImageId').animate([{
transform: 'translateY(0px)'
},
{
transform: 'translateY(-300px)'
}
], {
duration: 300,
delay: 300,
fill: 'forwards',
});
animation.addEventListener('finish', () => alert('end ani'));
<div id="myImageId"><img src="https://picsum.photos/200"></div>
Another option, which is only supported by FireFox currently, is the Animation.finished promise:
var animation = document.querySelector('#myImageId').animate([{
transform: 'translateY(0px)'
},
{
transform: 'translateY(-300px)'
}
], {
duration: 300,
delay: 300,
fill: 'forwards',
});
animation.finished.then(() => alert('end ani'));
<div id="myImageId"><img src="https://picsum.photos/200"></div>

jQuery: Call and Uncall a Function

I am using the following code to call a function when the screen is less than 200 but I can't disable the function when the scroll is more than 200.
function animateHeader() {
$(selector)
.animate({ opacity: 0.0, bottom: 70 }, { duration: 600 })
.animate({ opacity: 0.0, bottom: 50 }, { duration: 0 })
.animate({ opacity: 0.0, bottom: 70 }, { duration: 600, complete: animateHeader })
}
$window.on('scroll', function() {
if ($(window).scrollTop() < 200) {
animateHeader();
} else {
// Disable animateHeader()
}
}); // Finish scroll
I know there are alternatives to not call a function here in this case, but is it possible to disable a function when it's already active?
Try using stop() function:
else {
$(selector).stop();
}

Web animations API callback function

I've just discovered the Web Animations API, and I'm trying to figure out how to introduce a callback function for these animations..I've tried using the following
$('.box_wrapper')[0].animate([
{ right: '-100%' },
{ right: 0 }
], {
fill: 'forwards',
duration: 1000,
onfinish: function() {
// do stuff
}
});
Looking at the w3c spec on this section I thought that the onfinish property is what I'd need to use, but nothing happens.
I've also tried using the jQuery callback syntax;
$('.box_wrapper')[0].animate([
{ right: '-100%' },
{ right: 0 },
], {
fill: 'forwards',
duration: 1000
}, function() {
// do stuff
});
But of course this doesn't work either. Any Ideas, I'm sure it's something simple, I've just not been able to find the info yet.
I nearly had it right, with a small tweak like so, the callback works;
$('.box_wrapper')[0].animate([
{ right: '-100%' },
{ right: 0 }
], {
fill: 'forwards',
duration: 1000
}).onfinish = function() {
// do stuff
};

Animating like balloon bursting using javascript / jquery

I would like make a image burst to pieces, this animation should continue infinetly. Pls advice on how to proceed with this? Is it possible to use the jquery animate function to achieve this.
Try this,
http://jsfiddle.net/Dripple/AGGrv/.
This makes a fine animation of bursting a balloon.
$("#bubble1").click(function() {
$("#bubble1").stop(true, false);
$(this).hide("explode", {
pieces: 50
}, 250);
});
function animate1() {
$("#bubble1").animate({
"-moz-border-radius": "110px/100px",
"-webkit-border-radius": "110px 100px",
"border-radius": "110px/100px",
height: '100px',
width: '110px',
top: '240px'
}, 1500, animate2());
}
function animate2() {
$("#bubble1").animate({
"-moz-border-radius": "100px/110px",
"-webkit-border-radius": "100px 110px",
"border-radius": "100px/110px",
height: '110px',
width: '100px',
top: '235px'
}, 1500, function() {
$('#bubble1').trigger('mouseover');
});
}
$("#bubble1").mouseover(function() {
animate1();
});
$("#bubble1").mouseout(function() {
$("#bubble1").stop(true, false);
});

Categories