How can I add an 'ended' function to .animate() - javascript

In the following jQuery statement, I'm attempting to enable the pointer events when the button animation completes, but it is unclear to me how to implement an ended or complete function. Any recommendations?
$('#certButton').delay(5500).animate({ 'opacity': [ 1, "linear" ]}, 500);

As described in the documentation, this can be added as the 4th parameter of the animate() function, like that:
$('#certButton').delay(5500).animate(
{ 'opacity': 1 },
500,
"linear",
function() {
}
);
Update:
JSFiddle here.
I am also unsure why this line
{ 'opacity': [ 1, "linear" ]}
works, but I think the syntax conforming with the documentation I used above looks cleaner, and functions the same (see the JSFiddle).

Thanks for the help.
I have reworked it off your answers to the below code.
$('#certButton').delay(500).animate({ 'opacity': [ 1, "linear" ]}, {
duration:500,
complete: function() {
document.getElementById("certButton").style.pointerEvents = "visible";
}
});

Related

jQuery 3.5.1 callback function in .animate() not working

I have a problem making a callback function in .animate().
The animation goes very smoothly and without problems, but the complete: ()=> part is not working at all. I've copied this structure from the documentation but it just doesn't want to coop after my changes. Does anyone know why it doesn't work? Is it cause by setInterval? If so, how can I loop this animation?
The code is as follows:
setInterval(() => {
$(".slide")[0].animate({
"marginLeft": "-100%"
}, {
duration: 2000,
easing: "linear",
complete: () => {
console.log("test");
},
});
}, 6000);
You will need to make use of the correct selector:
setInterval(() => {
$(".slide").eq(0).animate({
"marginLeft": "-100%"
}, {
duration: 2000,
easing: "linear",
complete: () => {
console.log("test");
},
});
}, 6000);
When you get element 0 fro mthe Object, it returns the DOM Element and not a jQuery Object. See More:
https://api.jquery.com/eq/

CountTO in Javaascript

I've got countto function and it works fine when it's once in the code. I'd like to place it twice for vnumber1 and vnumber2, if I put vnumber1 code it works, if I put vnumber2 code - it works, but if they are one by one it doesn't work, what is missing in the code? I'm rookie. Blow it's the code:
clearInterval(intervalProgress);
$('.web1-step2').slideUp();
$('.web1-step3').slideDown();
$('.userJS').html($('.username-input').val());
$('.vNumberJS').countTo({
from: 10,
to: $('.vNumber-input').val(),
speed: 1000,
refreshInterval: 1,
onComplete: function(value) {
$('.vNumberJSthick').css('opacity', '1');
$('.vNumber2JS').countTo({
from: 10,
to: $('.vNumber2-input').val(),
speed: 1000,
refreshInterval: 1,
onComplete: function(value) {
$('.vNumber2JSthick').css('opacity', '1');
setTimeout(function() {
$('.web1-step3').fadeOut(function() {
$('.web1-offers').fadeIn();
});
});
}
});
}
});
The vNumber2 code, if I delete it it works fine, i'd like to put them both, whats wrong?

How to get onClick function with false animate queues to also run an outside function?

http://jsfiddle.net/neowot/xgJns/184/
Hi! I am wondering how to get the "resize" function to run when the onClick code is clicked, in a specific part of the code that I've marked with the comment "Here". My attempt was:
$('#Div5').animate({
marginLeft: isOut ? '120px' : '0px'
}, { duration: 200, queue: false }, resize);
but for some reason that isn't working. I'm not sure if my website in particular is just messed up.
Thank you.
Here is the updated click function, add third parameter function(){} to animate and call resize() wrapped in it:
$('#Div1').click(function() {
if ( $('#Div2').is(":visible") ) {
$('#Div2').hide(0);
}
$('#Div5').toggleClass('isSize');
var isSize = $('#Div5').hasClass('isSize');
$('#Div5').animate({
width: isSize ? '408' : '204px'
}, { duration: 200, queue: false }, function(){
resize();
});
$('#Div5').toggleClass('isOut');
var isOut = $('#Div5').hasClass('isOut');
$('#Div5').animate({
marginLeft: isOut ? '120px' : '0px'
}, { duration: 200, queue: false }, function(){
resize();
});
$('#Div3').fadeToggle(500);
$('#Div4').fadeToggle(500);
});
DEMO

jQuery does not work when reload the page content via ajax

I use Bootstrap to display a popover, until there is with all this code below everything works normal.
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
I only need to load the content of the page via ajax, then I changed the code because when I load the content dynamically I need to delegate events, changed the code and it looked like this:
$('body').on('click','.emoticons',function()
{
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Now my troubles started. The code works however when I click the first time it does not work, so it works when I click more than once on the link. What to do?
What's happening is that when you are clicking on the .emoticons and executing your popover function, it is at that moment that you are binding it to your click. That's why it doesn't work the first time, but it works afterwards. It starts listening to the click event after that.
Ideally, the solution is to run the .popover function when the new content is loaded (on your AJAX callback).
If you want to just copy paste my code and see if it works, you can do this:
$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
}).popover('toggle');
});
But, I would NOT recommend this code specifically, since you are re-initializing your popover every time you click on it.
It's better and more clear if you bind all popovers after your AJAX request is done:
$.ajax( "BlaBlaBla.php" )
.done(function() {
// Convert all emoticons to popovers
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
});
});
It doesn't work the first time because the first click if firing off the body onclick handler which binds your popover.
Try something like this in your $(document).ready() function.
$(".emoticons").click(function(){
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});

Parallel jQuery effects

I want to execute two effects in parallel. A jQuery UI "transfer" animation and a "fadeIn" on another element. They should begin and end at the same time.
My code so far:
$('#foo').hover(function() {
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, 300, function() {
$('#bar').fadeIn(300);
});
});
I understand that both effects are executed one after another. Is it possible to achieve parallel effect execution?
You had the fadeIn function in the "callback" of the effect. The callback is triggered/run only after the animation has finished. This should help you out..
$('#foo').hover(function() {
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, 300);
$('#bar').fadeIn(300);
});
$('#foo').hover(function() {
$('#bar').fadeIn(300);
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, 300 );
});
You can do 2 or more parallel fx using animate.
Two run the two animations in parallel i.e. simultaneously use queue : false and don't put the second animation in the callback function of the first one like this:
$('#foo').hover(function() {
$(this).effect("transfer", {
to: "#transition-target",
className: "ui-effects-transfer"
}, { duration:300, queue: false});
$('#bar').fadeIn({ duration: 300, queue: false});
});

Categories