We Keep Coding

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/

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

jQuery innerWidth not working with } else { without doing a page refresh

I have an issue with jQuery not firing on the else statement and I'm pretty sure its pretty simple why it's not but unable to solve it myself due to the lack of my JavaScript knowledge, I'm hoping that someone can tell me the issue.
My jQuery script has two sets of actions, one for above 639px and one set below. It works on the page load but if you reduce the size from 1600px to 600px, the height remains of the element remains the height of the window despite going under 639px it does not change it to height-min: auto.
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner .vegas-container').css('min-height', 'auto');
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
}
}).resize();
});

The min-height declaration does not work because you have a typo: the selectors in your if-else conditions are not the same:
In the if block: $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
In the else block: $('.nanoContainer, .flexAligner .vegas-container')
A comma is missing from the latter, and without your markup I cannot tell which one is the intended selector.
With regards to the issue with .vegas() not working as it should, that is because you are only initialising the plugin at different breakpoints, but never destroying the other instance. In this case, I refer you to the code: the plugin appears to expose a destroy function, which you can call to destroy the instance when switching between breakpoints, e.g. $selector.vegas('destroy').
Here is a code that might work: no guarantees since you have not provided an MCVE and I am unable to test it:
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
// Set min-height
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
// Create new Vegas instance
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$(".home .intro").vegas('destroy');
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', 'auto');
// Create new Vegas instance
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$("body.home").vegas('destroy');
}
}).resize();
});

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

how to delay() qtip() tooltip to be loaded

I Load this way:
$('.selector').each(function(){
$(this).qtip({
content: { url: '/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'<center><img src="/images/loader.gif" alt="loading..." /></center>' },
show: { delay: 700, solo: true,effect: { length: 500 }},
hide: { fixed: true, delay: 200 },
position: {
corner: {
target: 'topRight',
tooltip: 'left'
}
},
show: {
// Show it on click
solo: true // And hide all other tooltips
},
style: {
name: 'light',
width: 730,border: {
width: 4,
radius: 3,
color: '#5588CC'
}
}
});
});
And that looks like if there is a thelay cause of the effect. but qtip.php it's loaded with no delay which is what I really want (to reduce unneeded requests)
Can I delay 300ms before loading qtip.php?

You could set it to use a custom event, then trigger the event after a timeout. The hoverIntent plugin might help, if you want to wait until the mouse stops.
Using hoverIntent:
$(selector).hoverIntent(function() {
$(this).trigger('show-qtip');
}, function() {
$(this).trigger('hide-qtip');
}).qtip({
// ...
show: {
when: { event: 'show-qtip' }
},
hide: {
when: { event: 'hide-qtip' }
}
});
If you want to make hoverIntent wait longer before triggering, you can give it a configuration object with an interval property:
$(selector).hoverIntent({
over: showFunction,
out: hideFunction,
interval: 300 // Don't trigger until the mouse is still for 300ms
});
Without a plugin (I haven't tested this):
(function() { // Create a private scope
var timer = null;
var delay = 300; // Set this to however long you want to wait
$(selector).hover(function() {
var $this = $(this);
timer = setTimeout(function() {
$this.trigger('show-qtip');
}, delay);
}, function() {
if (timer) {
clearTimeout(timer);
}
}).qtip({
// ...
show: {
when: { event: 'show-qtip' }
}
});
})();

Here I just created another param and it's more simple to use, I have tested this in qtip1(not sure about qtip2)
$('.qtip').qtip({
show: {
when: 'mouseover',
//customized param, when 'mouseout' the qtip will not shown and delay will clean
cancel : 'mouseout',
delay: 500
}
});
To add this param, you need to modify the code of function assignEvents() in qtip:
function assignEvents()
{
...
function showMethod(event)
{
if(self.status.disabled === true) return;
// If set, hide tooltip when inactive for delay period
if(self.options.hide.when.event == 'inactive')
{
// Assign each reset event
$(inactiveEvents).each(function()
{
hideTarget.bind(this+'.qtip-inactive', inactiveMethod);
self.elements.content.bind(this+'.qtip-inactive', inactiveMethod);
});
// Start the inactive timer
inactiveMethod();
};
// Clear hide timers
clearTimeout(self.timers.show);
clearTimeout(self.timers.hide);
// line : 1539
// Added code
--------------------------------------------
// Cancel show timers
if(self.options.show.cancel)
{
showTarget.bind(self.options.show.cancel,function(){
clearTimeout(self.timers.show);
});
}
--------------------------------------------
// Start show timer
self.timers.show = setTimeout(function(){ self.show(event); },self.options.show.delay);
};

For qtip2 there is parameter, called show while initializing the plugin, which represents time in milliseconds by which to delay the showing of the tooltip when the show.event is triggered on the show.target.
For example:
/*This tooltip will only show after hovering the `show.target` for 2000ms (2 seconds):*/
jQuery('.selector').qtip({
content: {
text: 'I have a longer delay then default qTips'
},
show: {
delay: 2000
}
});