This is my CSS:
.animated {
transition: 1s;
left: -400px;
}
I want to element after it class name has been set to .animated. and after it finish the transition I want to fire a function. Can someone please suggest me the idea?
You can use transitionEnd event, it's fired when a CSS transition has completed:
function showMessage() {
alert('Transition has finished');
}
var element = document.getElementById("animated");
element.addEventListener("transitionend", showMessage, false);
DEMO
Related
After clicking the button the block gets a .red class with transition. I need to run a func after this transition is finished. Here is my code:
<button>PRESS</button>
<div class="test"></div>
.test {
background-color: grey;
height: 250px;
}
.red {
background: red;
transition: all 5s ease;
}
const btn = document.querySelector('button'),
block = document.querySelector('.test');
btn.addEventListener('click', function() {
block.classList.add('red');
foo();
})
function foo() {
block.addEventListener('webkitTransitionEnd otransitionend oTransitionEnd
msTransitionEnd transitionend', function() {
block.classList.remove('red');
})
}
https://codepen.io/MrCodeBlog/pen/xpaNQZ?editors=1010
Event type need to be a string for each event. So you can do like this.
function foo() {
[
'webkitTransitionEnd',
'otransitionend',
'oTransitionEnd',
'msTransitionEnd',
'transitionend',
].forEach(function(transition) {
block.addEventListener(transition, function() {
block.classList.remove('red');
});
});
}
Fiddle: https://codepen.io/dartist21/pen/MrqNWJ
You can't pass all events at once, that is because it does not work. You need to add each individually. To FF is as follows:
function foo() {
block.addEventListener('transitionend', function() {
block.classList.remove('red');
})
}
This updated fiddle work perfectly on Mozilla: https://codepen.io/anon/pen/aEagjy?editors=1010
Looks like you need a setTimeout(). Using setTimeout, you can run a block of code after a set amount of time. In your example you would just wrap foo() in a setTimeout() with 5000ms.
btn.addEventListener('click', function() {
block.classList.add('red');
// The number is in ms so 5000ms is equal to the 5s it
// takes for your CSS transition to finish.
setTimeout(foo, 5000);
})
So I made this overlay function, and I've also made it close on click on the overlay its self. Problem is I bind the click event every time I run the function ($overlay.click(function() {...}), and I think this is bad for performance. Any ideas?
function fluidOverlayShow(action, currentElement) {
var $overlay = $('#fluid-overlay');
if (action == 'open') {
$overlay.click(function() {
emgFluidOverlayShow('close', currentElement);
});
$(currentElement).addClass('fluid-bring-front');
$overlay.addClass('fluid-anim-overlay');
$overlay.data('statuson', true);
} else if (action == 'close') {
$overlay.removeClass('fluid-anim-overlay');
$overlay.data('statuson', false);
$('.fluid-header').find('.fluid-bring-front').removeClass('fluid-bring-front');
}
}
$('#overlay_test').mouseover(function() {
fluidOverlayShow('open', '#overlay_test');
});
$('#overlay_test').mouseout(function() {
fluidOverlayShow('close');
});
#fluid-overlay {
display: none;
opacity: 0.3;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 1000;
}
#overlay_test {
position: relative;
}
#fluid-overlay.fluid-anim-overlay {
display: block;
-webkit-animation: fade-in-overlay 0.2s 1;
-moz-animation: fade-in-overlay 0.2s 1;
animation: fade-in-overlay 0.2s 1;
}
.fluid-bring-front {
z-index: 1100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Overlay test
<div id="fluid-overlay"></div>
If you absolutely have to keep the click event in the function then use .on() and .off() and then define .off("click") before you define on("click") like this:
$overlay.off("click").on("click", function() {
emgFluidOverlayShow('close', currentElement);
});
This will remove the event binding before it adds it.
You can even namespace the click event like this so it only removes that instance of click (in case other events get added elsewhere):
$overlay.off("click.fluidOverlayClose").on("click.fluidOverlayClose", function() {
emgFluidOverlayShow('close', currentElement);
});
Or...
...do as Guruprasad Rao suggests and move it out of the function (which is a much better way of handling it).
An alternative implementation uses jQuery's .on() method combined with event delgation. What his means is you allow the click event to bubble up through the DOM to a parent element that will always be there that will capture and process the event rather than having to rebind it to the dynamic element everytime it's created.
This would look something like
$("body").on("click","#fluid-overlay",function() {
//code goes here
});
When I stay in my div the animation won't work again if I go out and in again... So like when I stay in the field while the animation is playing when I quit and go back in it again, it doesn't start the animation over again..
HTML:
<div class="ani-bounce-slow" style="height: 200px; width: 50%; background-color: #3c3; ">
<p> This is a bouncing Text!</p>
</div>
CSS:
.bounce-slow {
animation: bounce 3s;
}
#keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
jQuery:
$(document).ready(function () {
$('.ani-bounce-slow').mouseenter(function () {
$(this).addClass('bounce-slow');
});
$('.ani-bounce-slow').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
$(this).removeClass('bounce-slow');
}
);
});
Fiddle here
I think your problem is that you are using one() function instead of on():
Change:
$('.ani-bounce-slow').one('webkitAnimationEnd...
To:
$('.ani-bounce-slow').on('webkitAnimationEnd...
.one( events [, data ], handler )
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
.on( events [, selector ] [, data ], handler )
Attach an event handler function for one or more events to the selected elements.
Looks like you just need to rip out the class to stop the animation on leave, and just add it back on enter. This will make the animation happen every time.
$('.ani-bounce-slow').mouseenter(function () {
$(this).addClass('bounce-slow');
});
$('.ani-bounce-slow').mouseleave(function () {
$(this).removeClass('bounce-slow');
});
If you want the animation to continue on mouse leave, then you need to check for animation completion, or set a timer for how loong the animation should be.
I would like to make a function run the moment a person loads my page. No interactivity. The function is loading when someone clicks. I also would like to make the function loop after 1 minute and a half. I tried replacing "click" for window.onload and body.onload but as you may have noticed by now I am a true begginer with javascript. Can someone give me a hand please. For now all I have is this:
// Animate an element by adding a class to it:
// Paramaters:
// anim: the class name to add
// time: animation duration (optional, fallsback to the class)
// cb: an optional callback function to happen once the animation ends
$.fn.animatecss = function(anim, time, cb) {
if (time) this.css('-webkit-transition', time / 1000 + 's');
this.addClass(anim);
if ($.isFunction(cb)) {
setTimeout(function() {
// Ensure that the element is available inside the callback.
$(this).each(cb);
}, (time) ? time : 5000);
}
return this;
};
$(document).ready(function() {
$('.box')click(function() {
$(this).animatecss('blur-out', 5000, function() {
console.log('callback');
});
});
});
.blur-out {
-webkit-filter: blur(8px);
-webkit-transform: scale(1.4, 1.4);
-webkit-transition: all 5s ease-out;
transition: all 5s ease-out;
visibility: hidden;
}
.box {
background:#fff;
margin: 80px;
padding: 20px;
}
<div class="box">
<img src="http://companionplants.com/images/small-plant2.jpg">
</div>
$(document).ready(function() {
$('.box').click(function() {
$(this).animatecss('blur-out', 5000, function() {
console.log('callback');
});
});
// add this line
$('.box').trigger('click');
});
Reference: http://api.jquery.com/trigger/
If I understood correctly, You want to start animation automatically after page is loaded.
Remove event handler for click. Leave code for animation like this:
$(document).ready(function() {
$('.box').animatecss('blur-out', 5000, function() {
console.log('callback');
});
});
For automatically repeating this code, you need to place this code in recursive function with settimeout().
$(document).ready(function() {
function animate(){
$('.box').animatecss('blur-out', 5000, function() {
console.log('callback');
});
setTimeout( animate(), 60000);
}
animate();
});
I hope that there are no errors, I cann't check it now, but I think it will help you
I try to make a image fadeIn effect, I set jQuery animate method to implement fade-in effect, and I found the hover event which I register in CSS have been cancelled.
I think it's weird, the method should not affect my hover effect.
Although I can re-register hover event by javascript, but it is doing an other task
Is anything I misunderstanding?
P.S. I'm trying to not to use CSS3 animation.
JS part:
$('img').animate({
'opacity': '0.5'
}, 1500);
CSS part:
img {
opacity: 0;
}
img:hover {
opacity: 1;
}
http://jsfiddle.net/aSRMR/
Use !important in css that will solve the problem
img:hover {
opacity: 1 !important;
}
Working Fiddle
You could use hover instead.
$('img').hover( function (){
console.log('hovered in');
}, function (){
console.log('hovered out');
}
Don't forget to put stop() before you do an animate.
so trying your code will look like this.
$('img').hover( function (){
console.log('hovered in');
$('img').stop().animate({'opacity': '1'}, 1500);
}, function (){
console.log('hovered out');
$('img').stop().animate({'opacity': '0.5'}, 1500);
}
Another solution, if you want to do a CSS approach, do it like this.
$('img').hover( function (){
$('img').addClass('hovered');
}, function (){
$('img').removeClass('hovered');
}
on your CSS.
img {
opacity: 0;
}
.hovered {
opacity: 1;
}
Have you also considered fading using CSS Webkit?