jQuery 3.5.1 callback function in .animate() not working - javascript

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/

Related

How do i get "fail" to be displayed with JQuery animation fail function?

I have a slider and i want that when the elements of the slider run out, for example, when clicking right and nothing happens because there no more elements it prints "fail". I m using this:
this might help: codepen.io/anon/pen/ZMxevp
$('#status_bar').animate({
left: "+=500px"
}, {
duration: 3000,
specialEasing: {
width: "linear",
height: "easeOutBounce"
},
complete: function () {
console.log("complete")
},
fail: function () {
console.log("fail")
}
});

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

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

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

run animation at the same time not working

So, i'm trying to run 2 animation at the same time on mouseover
However, after using queue:false they still running one after another :(
here's what i got:
$(document.body).on('mouseover', '.j-ad-slide', function(e) {
e.preventDefault();
$('.j-ad-slide').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.side-nav, .sub-menu').animate({
top: '422'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
Any idea on what I'm doing wrong? BTW: .side-nav and .sub-menu elements are position:fixed - I think that's the problem. I'm not sure how to work around that :(
Your code should work fine. Here is a fiddle for you.
$(document.body).on('mouseover', '.animate', function(e) {
e.preventDefault();
$('.animate').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.animate2').animate({
left: '100'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
fiddle with fixed position

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