Set opacity of spinner after set using animateHow to manage a redirect request after a jQuery Ajax callSet cellpadding and cellspacing in CSS?Setting “checked” for a checkbox with jQuery?How to Check if element is visible after scrolling?Opacity of background-color, but not the textSet a default parameter value for a JavaScript functionHow do I set/unset a cookie with jQuery?Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQueryCSS opacity only to background color, not the text on it?CSS Background Opacity
Social leper versus social leopard
How to ask a man to not take up more than one seat on public transport while avoiding conflict?
Cheap antenna for new HF HAM
What is the fastest way to do Array Table Lookup with an Integer Index?
Are actors contractually obligated to certain things like going nude/ Sensual Scenes/ Gory Scenes?
Can Bless or Bardic Inspiration help a creature from rolling a 1 on a death save?
How to deal with my team leader who keeps calling me about project updates even though I am on leave for personal reasons?
How do I extract code from an arduino?
What did the controller say during my approach to land (audio clip)?
Nanomachines exist that enable Axolotl-levels of regeneration - So how can crippling injuries exist as well?
Hilbert's hotel, why can't I repeat it infinitely many times?
Do things made of adamantine rust?
Gas leaking in base of new gas range?
Algorithm that spans orthogonal vectors: Python
Hiking with a mule or two?
What do these pins mean? Where should I plug them in?
Which museums have artworks of all four ninja turtles' namesakes?
What is the need of methods like GET and POST in the HTTP protocol?
Understanding an example in Golan's "Linear Algebra"
Minimize taxes now that I earn more
Pandas aggregate with dynamic column names
Do the villains know Batman has no superpowers?
Can one guy with a duplicator initiate a nuclear apocalypse?
US entry with tourist visa but past alcohol arrest
Set opacity of spinner after set using animate
How to manage a redirect request after a jQuery Ajax callSet cellpadding and cellspacing in CSS?Setting “checked” for a checkbox with jQuery?How to Check if element is visible after scrolling?Opacity of background-color, but not the textSet a default parameter value for a JavaScript functionHow do I set/unset a cookie with jQuery?Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQueryCSS opacity only to background color, not the text on it?CSS Background Opacity
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have a bootstrap spinner in my html, which i wish to hide show (with a slight delay to avoid flicker) then hide once the response is received from the server.
Sounds basic.
I'm able to change the opacity to 1, but resetting it to 0 is not working as expected- although the property opacity of the element is 0, it is still visible.
spinnerElement = $(event.target).siblings(".spinner-border");
if (spinnerElement)
// display spinner element
spinnerElement.delay(500).animate( opacity: 1 , 300);
// submit data via ajax
$.ajax(
type: 'POST',
url: url,
data: 'foo': 'bar' ,
success: function ()
// Hide spinner
if (spinnerElement)
spinnerElement.css( opacity: 0 );
// ... successful stuff
,
error: function (xhr)
// ... unsuccessful stuff
// Hide spinner
if (spinnerElement)
console.log(spinnerElement.css('opacity')) // 1
spinnerElement.css( opacity: 0 );
console.log(spinnerElement.css('opacity')) // 0
);
These are the properties on the element.
Why is this happening? I imagine that it's somethig to do with the animate/delay property, what is the correct way to deal with this?
javascript jquery css
asked Mar 28 at 15:03
User632716User632716
2,6462 gold badges18 silver badges37 bronze badges
|
show 2 more comments
I have a bootstrap spinner in my html, which i wish to hide show (with a slight delay to avoid flicker) then hide once the response is received from the server.
Sounds basic.
I'm able to change the opacity to 1, but resetting it to 0 is not working as expected- although the property opacity of the element is 0, it is still visible.
spinnerElement = $(event.target).siblings(".spinner-border");
if (spinnerElement)
// display spinner element
spinnerElement.delay(500).animate( opacity: 1 , 300);
// submit data via ajax
$.ajax(
type: 'POST',
url: url,
data: 'foo': 'bar' ,
success: function ()
// Hide spinner
if (spinnerElement)
spinnerElement.css( opacity: 0 );
// ... successful stuff
,
error: function (xhr)
// ... unsuccessful stuff
// Hide spinner
if (spinnerElement)
console.log(spinnerElement.css('opacity')) // 1
spinnerElement.css( opacity: 0 );
console.log(spinnerElement.css('opacity')) // 0
);
These are the properties on the element.
Why is this happening? I imagine that it's somethig to do with the animate/delay property, what is the correct way to deal with this?
javascript jquery css
asked Mar 28 at 15:03
User632716User632716
2,6462 gold badges18 silver badges37 bronze badges
Your ajax request probably returned success before 500 was up. You could just simply hide the spinner, then show spinner just before the ajax call and then hide it on success or failure. You can't sync it with a fixed number delay
– Huangism
Mar 28 at 15:12
@Huangism i was trying to avoid the flicker effect of a super quick on/off- any ideas on fading in/out or reducing this effect?
– User632716
Mar 28 at 15:17
What aboutspinnerElement.stop().css( opacity: 0 );
– GrafiCode
Mar 28 at 15:18
I am unsure of what flicker effect you are referring to. Is it an animation or something? is it possible to replicate the flicker thing on here? only the flicker part, I think that's the root of the issue
– Huangism
Mar 28 at 15:19
@Huangism i meant the spinner appearing, then disappearing really quickly, the effect seems a bit abrupt, but no worries because:
– User632716
Mar 28 at 15:21
|
show 2 more comments
I have a bootstrap spinner in my html, which i wish to hide show (with a slight delay to avoid flicker) then hide once the response is received from the server.
Sounds basic.
I'm able to change the opacity to 1, but resetting it to 0 is not working as expected- although the property opacity of the element is 0, it is still visible.
spinnerElement = $(event.target).siblings(".spinner-border");
if (spinnerElement)
// display spinner element
spinnerElement.delay(500).animate( opacity: 1 , 300);
// submit data via ajax
$.ajax(
type: 'POST',
url: url,
data: 'foo': 'bar' ,
success: function ()
// Hide spinner
if (spinnerElement)
spinnerElement.css( opacity: 0 );
// ... successful stuff
,
error: function (xhr)
// ... unsuccessful stuff
// Hide spinner
if (spinnerElement)
console.log(spinnerElement.css('opacity')) // 1
spinnerElement.css( opacity: 0 );
console.log(spinnerElement.css('opacity')) // 0
);
These are the properties on the element.
Why is this happening? I imagine that it's somethig to do with the animate/delay property, what is the correct way to deal with this?
javascript jquery css
asked Mar 28 at 15:03
User632716User632716
2,6462 gold badges18 silver badges37 bronze badges
I have a bootstrap spinner in my html, which i wish to hide show (with a slight delay to avoid flicker) then hide once the response is received from the server.
Sounds basic.
I'm able to change the opacity to 1, but resetting it to 0 is not working as expected- although the property opacity of the element is 0, it is still visible.
spinnerElement = $(event.target).siblings(".spinner-border");
if (spinnerElement)
// display spinner element
spinnerElement.delay(500).animate( opacity: 1 , 300);
// submit data via ajax
$.ajax(
type: 'POST',
url: url,
data: 'foo': 'bar' ,
success: function ()
// Hide spinner
if (spinnerElement)
spinnerElement.css( opacity: 0 );
// ... successful stuff
,
error: function (xhr)
// ... unsuccessful stuff
// Hide spinner
if (spinnerElement)
console.log(spinnerElement.css('opacity')) // 1
spinnerElement.css( opacity: 0 );
console.log(spinnerElement.css('opacity')) // 0
);
These are the properties on the element.
Why is this happening? I imagine that it's somethig to do with the animate/delay property, what is the correct way to deal with this?
javascript jquery css
javascript jquery css
asked Mar 28 at 15:03
User632716User632716
2,6462 gold badges18 silver badges37 bronze badges
asked Mar 28 at 15:03
User632716User632716
2,6462 gold badges18 silver badges37 bronze badges
asked Mar 28 at 15:03
User632716User632716
2,6462 gold badges18 silver badges37 bronze badges
asked Mar 28 at 15:03
User632716User632716
2,6462 gold badges18 silver badges37 bronze badges
asked Mar 28 at 15:03
User632716User632716
2,6462 gold badges18 silver badges37 bronze badges
2,6462 gold badges18 silver badges37 bronze badges
Your ajax request probably returned success before 500 was up. You could just simply hide the spinner, then show spinner just before the ajax call and then hide it on success or failure. You can't sync it with a fixed number delay
– Huangism
Mar 28 at 15:12
@Huangism i was trying to avoid the flicker effect of a super quick on/off- any ideas on fading in/out or reducing this effect?
– User632716
Mar 28 at 15:17
What aboutspinnerElement.stop().css( opacity: 0 );
– GrafiCode
Mar 28 at 15:18
I am unsure of what flicker effect you are referring to. Is it an animation or something? is it possible to replicate the flicker thing on here? only the flicker part, I think that's the root of the issue
– Huangism
Mar 28 at 15:19
@Huangism i meant the spinner appearing, then disappearing really quickly, the effect seems a bit abrupt, but no worries because:
– User632716
Mar 28 at 15:21
|
show 2 more comments
Your ajax request probably returned success before 500 was up. You could just simply hide the spinner, then show spinner just before the ajax call and then hide it on success or failure. You can't sync it with a fixed number delay
– Huangism
Mar 28 at 15:12
@Huangism i was trying to avoid the flicker effect of a super quick on/off- any ideas on fading in/out or reducing this effect?
– User632716
Mar 28 at 15:17
What aboutspinnerElement.stop().css( opacity: 0 );
– GrafiCode
Mar 28 at 15:18
I am unsure of what flicker effect you are referring to. Is it an animation or something? is it possible to replicate the flicker thing on here? only the flicker part, I think that's the root of the issue
– Huangism
Mar 28 at 15:19
@Huangism i meant the spinner appearing, then disappearing really quickly, the effect seems a bit abrupt, but no worries because:
– User632716
Mar 28 at 15:21
Your ajax request probably returned success before 500 was up. You could just simply hide the spinner, then show spinner just before the ajax call and then hide it on success or failure. You can't sync it with a fixed number delay
– Huangism
Mar 28 at 15:12
Your ajax request probably returned success before 500 was up. You could just simply hide the spinner, then show spinner just before the ajax call and then hide it on success or failure. You can't sync it with a fixed number delay
– Huangism
Mar 28 at 15:12
@Huangism i was trying to avoid the flicker effect of a super quick on/off- any ideas on fading in/out or reducing this effect?
– User632716
Mar 28 at 15:17
@Huangism i was trying to avoid the flicker effect of a super quick on/off- any ideas on fading in/out or reducing this effect?
– User632716
Mar 28 at 15:17
What about
spinnerElement.stop().css( opacity: 0 );– GrafiCode
Mar 28 at 15:18
What about
spinnerElement.stop().css( opacity: 0 );– GrafiCode
Mar 28 at 15:18
I am unsure of what flicker effect you are referring to. Is it an animation or something? is it possible to replicate the flicker thing on here? only the flicker part, I think that's the root of the issue
– Huangism
Mar 28 at 15:19
I am unsure of what flicker effect you are referring to. Is it an animation or something? is it possible to replicate the flicker thing on here? only the flicker part, I think that's the root of the issue
– Huangism
Mar 28 at 15:19
@Huangism i meant the spinner appearing, then disappearing really quickly, the effect seems a bit abrupt, but no worries because:
– User632716
Mar 28 at 15:21
@Huangism i meant the spinner appearing, then disappearing really quickly, the effect seems a bit abrupt, but no worries because:
– User632716
Mar 28 at 15:21
|
show 2 more comments
1 Answer
1
active
oldest
votes
As per my comment, you can use jQuery.stop() to clear any ongoing animation on the element, before applying new css:
spinnerElement.stop().css( opacity: 0 );
answered Mar 28 at 15:22
GrafiCodeGrafiCode
1,3742 gold badges18 silver badges19 bronze badges
add a comment
|
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55400857%2fset-opacity-of-spinner-after-set-using-animate%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
As per my comment, you can use jQuery.stop() to clear any ongoing animation on the element, before applying new css:
spinnerElement.stop().css( opacity: 0 );
answered Mar 28 at 15:22
GrafiCodeGrafiCode
1,3742 gold badges18 silver badges19 bronze badges
add a comment
|
As per my comment, you can use jQuery.stop() to clear any ongoing animation on the element, before applying new css:
spinnerElement.stop().css( opacity: 0 );
answered Mar 28 at 15:22
GrafiCodeGrafiCode
1,3742 gold badges18 silver badges19 bronze badges
add a comment
|
As per my comment, you can use jQuery.stop() to clear any ongoing animation on the element, before applying new css:
spinnerElement.stop().css( opacity: 0 );
answered Mar 28 at 15:22
GrafiCodeGrafiCode
1,3742 gold badges18 silver badges19 bronze badges
As per my comment, you can use jQuery.stop() to clear any ongoing animation on the element, before applying new css:
spinnerElement.stop().css( opacity: 0 );
answered Mar 28 at 15:22
GrafiCodeGrafiCode
1,3742 gold badges18 silver badges19 bronze badges
answered Mar 28 at 15:22
GrafiCodeGrafiCode
1,3742 gold badges18 silver badges19 bronze badges
answered Mar 28 at 15:22
GrafiCodeGrafiCode
1,3742 gold badges18 silver badges19 bronze badges
answered Mar 28 at 15:22
GrafiCodeGrafiCode
1,3742 gold badges18 silver badges19 bronze badges
1,3742 gold badges18 silver badges19 bronze badges
add a comment
|
add a comment
|
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55400857%2fset-opacity-of-spinner-after-set-using-animate%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your ajax request probably returned success before 500 was up. You could just simply hide the spinner, then show spinner just before the ajax call and then hide it on success or failure. You can't sync it with a fixed number delay
– Huangism
Mar 28 at 15:12
@Huangism i was trying to avoid the flicker effect of a super quick on/off- any ideas on fading in/out or reducing this effect?
– User632716
Mar 28 at 15:17
What about
spinnerElement.stop().css( opacity: 0 );– GrafiCode
Mar 28 at 15:18
I am unsure of what flicker effect you are referring to. Is it an animation or something? is it possible to replicate the flicker thing on here? only the flicker part, I think that's the root of the issue
– Huangism
Mar 28 at 15:19
@Huangism i meant the spinner appearing, then disappearing really quickly, the effect seems a bit abrupt, but no worries because:
– User632716
Mar 28 at 15:21