I would like a button to blink for a short duration prior to a AJAX call (and some other animations happening). The ajax call happens very fast so I do not want to use AJAX's before function. The blink must be distinct prior to any other animations. I feel as if there is a prettier way to do this:
//This is inside of a button click event
$(this).addClass('active').delay(250).queue(function (e) {
$(this).removeClass('active').delay(250).queue(function (f) {
alert(33);
$child.css('margin-left', $(window).width() + 10 + 'px');
$child.load(url + 'API CALL' + $(this).data("id"), bindAClicks);
});
});
bindAClicks - Animates to margin:0.
$child is a container div.
active is a class with a dark background.
What's wierd is that the alert is not even firing.
If you are referring to beforeSend, I would recommend checking out this answer which shows how to wait for your animation to finish.
In response to Oleg's comment, I'm not sure what problem you're having when you say the response is so quick you can't see the blink. I created a quick example to demonstrate how it would work (so you can make the Ajax call and still perform the blink). Hopefully this helps.
Related
I am working on a font-test page that should switch the font of the header and paragraph tags on click. Which works fine but the experience is really jarring so I want to smooth it out with the following path:
fadeout -> do the font swap -> fade in
But the code runs the font swap first, then the animation.
I have the following code snippet, I am only including the jQuery because it's the root cause of my problem.
// Anytime a card is clicked
$('.card').click(function(){
// Call card by id and switch the fonts
var id = "#" + this.parentElement.id;
$(this).fadeOut(900,swapFont(id));
$(this).fadeIn(500);
// attach the above to some sort of transition callback
});
// Function to swap the font around so that the header is now the body font and the body font is now the header font
function swapFont(id) {
// font-swap logic in here which works fine
}
The issue is because the fadeOut() animation is (effectively) asynchronous. This means the next statement will be evaluated while the animation is in progress - hence the behaviour you're seeing. To fix this you need to use the callback pattern that the fadeX() methods provide.
Also, you're passing the result of the immediate execution of swapFont() to the callback, instead of a function reference to run when the event occurs. Try this:
$('.card').click(function(){
var id = "#" + this.parentElement.id;
$(this).fadeOut(900, function() {
swapFont(id);
$(this).fadeIn(500);
});
});
You are currently passing the result of the swapFont() call, instead you need to point to the function itself.
So this:
$(this).fadeOut(900,swapFont(id));
is the same as:
var x = swapFont(id);
$(this).fadeOut(900, x);
Easiest way is to wrap it in an anonymous function:
$(this).fadeOut(900, function() { swapFont(id) });
Edit:
The fadeIn will also execute before the fadeOut has completed. You can add a .delay or, better, call the fadeIn in the callback as per Rory's answer (so I won't repeat here).
I've been having a weird issue with Safari on iOS.
I'm using jQuery to manipulate a couple of divs, moving them, wrapping them and giving them dynamic heights. On every browser, these changes are perfectly working during the first page load, on Safari, sometimes yes and sometimes not.
basically in Safari, it loads the page without applying any changes, then if I keep refreshing it, it never works, but if I reenter the url, on the address bar and I hit "enter", that time it works.
Now, I solved it wrapping the function that triggers those DOM manipulations in a setTimeout function and I give it a delay of 400. SO now it waits 400ms before firing the function, and this way it's working, but I don't like it that much. I was wondering if you guys know a better system.
my code:
$('.wrap-services, .wrap-banner-cta, .wrap-logos, footer').wrapAll('<div class="fixer"></div>');
$('.fixer').insertAfter('.content');
function getHeight() {
var imgOffset = $('.wrap-hero-home picture.splash-main img').offset().top;
var fixerHeight = $('.fixer').height();
imgHeight = $('.wrap-hero-home picture.splash-main img').height();
$('.fixer').css('top', (imgOffset + imgHeight) + 50);
$('.container').height((imgOffset + imgHeight + fixerHeight) + 50);
}
//this is what I use now to prevent that issue
setTimeout(getHeight, 400);
Thanks
Technically, jQuery's bind method is deprecated, so you should probably use on, like they suggest:
$(window).on('load', function(){
//Do something
});
See the notes in this page related to the deprecation: http://api.jquery.com/bind/
If you're using an old version of jQuery, I guess it wouldn't matter, then proceed with bind
I have a tabs with 4 links.
I want click it via jQuery. I use this for first link:
$("a[data-search='a1']").delay(2000).trigger('click');
it works.
Now also I want do it for other link:
$("a[data-search='a1']").delay(2000).trigger('click');
$("a[data-search='a2']").delay(2000).trigger('click');
$("a[data-search='a3']").delay(2000).trigger('click');
$("a[data-search='a4']").delay(2000).trigger('click');
but it runs only once for first trigger.
also I tried interval method (please don't suggest it). I think
I can not use trigger('click') multipile.
what's the wrong?
live demo: https://jsfiddle.net/1fvqvjb3/8/
I could be mistaken on what it is you're trying to do, but it appears as if you want each link to be clicked in succession. The jQuery .delay() function is non-blocking, so it does not wait 2 seconds between each click; rather, there will be a single 2 second delay and then all 4 links will be clicked at the same time, which would certainly seem to appear as though only one link were being clicked.
I'm not sure what you mean by the "interval method" that you do not want suggested, but perhaps the best way to solve your problem is to use setTimeout().
(function f(i) {
setTimeout(function() {
$('a[data-search="a' + i + '"]').click();
if (i < 4) f(i+1);
}, 2000);
})(1);
This is an example of an IIFE, which I highly suggest reading up on if you're not already familiar with them.
I'm new to javascript so I'm struggling with the basics...
I'm using this delay to bring in a div but i want to fade the div in as part of this function (not just have the box appear)
function show() {
AB = document.getElementById('div_with_text');
AB.style.display = 'inline';
}
setTimeout("show()", 3000);
Can any one help with this?
I've tried adding things like:
$(function(){
$('#div_with_text').fadeIn('slow');
});
but I don't know the language well enough to get it to work...
Any help would be much appreciated!
Is your DIV hidden in the first place? If not, that is your problem. Your are trying to open an already opened door.
Your code is also incorrect, even if you hide the DIV, this will not work. It should have been setTimeout(show, 3000);
With the JavaScript code (setTimeout) you have provided, 3 seconds after the page loads, you are trying to display the DIV. Did you notice that the DIV was already there and never 'appeared' after 3 seconds as you expected?
Example - http://jsfiddle.net/BLPTq/2/ - just click run and see.
To make it work, hide the DIV first and then call the setTimeout or the jQuery method. Example - http://jsfiddle.net/zeXyG/ - just click run and see. Check the CSS display:none;
OR, if you don't want to hide it with CSS, just call hide() before calling fadeIn()
$('#div_with_text').hide().fadeIn('slow');
Example - http://jsfiddle.net/zeXyG/1/
As per your comment below. Add delay() to the call like shown below
$('#div_with_text').hide(); // this or use css to hide the div
$('#div_with_text').delay(2000).fadeIn('slow');
2 seconds after the page loads, this will hide the div and then fade in slowly. Look at this example carefully.
The fadeIn method will only work if you load the jQuery library on your page. Without that, the method will not work since it isn't part of native Javascript.
Once you have loaded jQuery, that method will work as your syntax is correct.
We're trying to make sure our JavaScript menu, which loads content, doesn't get overrun with commands before the content in question loads and is unfurled via .show('blind', 500), because then the animations run many times over, and it doesn't look so great. So I've got about six selectors that look like this:
("#center_content:not(:animated)")
And it doesn't seem to be having any effect. Trying only :animated has the expected effect (it never works, because it doesn't start animated), and trying :not(div) also has this effect (because #center_content is a div). For some reason, :not(:animated) seems not to be changing the results, because even when I trigger the selector while the div in question is visibly animated, the code runs. I know I've had success with this sort of thing before, but the difference here eludes me.
$("#center_content:not(:animated)").hide("blind", 500, function () {
var selector_str = 'button[value="' + url + '"]';
//alert(selector_str);
var button = $(selector_str);
//inspectProperties(button);
$("#center_content:not(:animated)").load(url, CenterContentCallback);
if (button) {
$("#navigation .active").removeClass("active");
button.addClass("active");
LoadSubNav(button);
}
});
I hope this provides sufficient context. I feel like the second selector is overkill (since it would only be run if the first selector succeeded), but I don't see how that would cause it to behave in this way.
Here's the snippet that seemed to be working in the other context:
function clearMenus(callback) {
$('[id$="_wrapper"]:visible:not(:animated)').hide("blind", 500, function() {
$('[id^="edit_"]:visible:not(:animated)').hide("slide", 200, function() {
callback();
});
});
}
Here, the animations queue instead of interrupt each other, but it occurs to me that the selector still doesn't seem to be working - the animations and associated loading events shouldn't be running at all, because the selectors should fail. While the queueing is nice behavior for animations to display, it made me realize that I seem to have never gotten this selector to work. Am I missing something?
Sometimes it's helpful to use .stop() and stop the current animation before you start the new animation.
$("#center_content").stop().hide("blind", 500, function () {});
Really depends on how it behaves within your environment. Remember that .stop() will stop the animation as it was (eg. halfway through hiding or fading)
I don't know if I understand it correctly, but if you want to make sure the user doesn't trigger the menu animation again while it's currently animating(causing it to queue animations and look retarded, this works and should help. I use an if-statement. And before any mouseover/off animation I add .stop(false, true).
$('whatever').click(function(){
//if center_content is not currently animated, do this:
if ($("#center_content").not(":animated")) {
$(this).hide(etc. etc. etc.)
}
//else if center_content IS currently animated, do nothing.
else {
return false;}
});
another example i found elsewhere:
if($("#someElement").is(":animated")) {
...
}
if($("#someElement:animated").length) {
...
}
// etc
then you can do:
$("#showBtn").attr("disabled", $("#someElement").is(":animated"));