Styjun

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;

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

share|improve this question

asked Mar 28 at 15:03

User632716User632716

2,64622 gold badges1818 silver badges3737 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 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
  

  
  
  
  

 | 
show 2 more comments

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

share|improve this question

asked Mar 28 at 15:03

User632716User632716

2,64622 gold badges1818 silver badges3737 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 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
  

  
  
  
  

 | 
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

share|improve this question

asked Mar 28 at 15:03

User632716User632716

2,64622 gold badges1818 silver badges3737 bronze badges

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

share|improve this question

asked Mar 28 at 15:03

User632716User632716

2,64622 gold badges1818 silver badges3737 bronze badges

share|improve this question

asked Mar 28 at 15:03

User632716User632716

2,64622 gold badges1818 silver badges3737 bronze badges

asked Mar 28 at 15:03

User632716User632716

2,64622 gold badges1818 silver badges3737 bronze badges

asked Mar 28 at 15:03

User632716User632716

2,64622 gold badges1818 silver badges3737 bronze badges

1 Answer
1

active

oldest

votes

1

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

share|improve this answer

answered Mar 28 at 15:22

GrafiCodeGrafiCode

1,37422 gold badges1818 silver badges1919 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
);



);

draft saved

draft discarded

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

Name

Email

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

Name

Email

Required, but never shown

1

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

share|improve this answer

answered Mar 28 at 15:22

GrafiCodeGrafiCode

1,37422 gold badges1818 silver badges1919 bronze badges

add a comment
 | 

1

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

share|improve this answer

answered Mar 28 at 15:22

GrafiCodeGrafiCode

1,37422 gold badges1818 silver badges1919 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 );

share|improve this answer

answered Mar 28 at 15:22

GrafiCodeGrafiCode

1,37422 gold badges1818 silver badges1919 bronze badges

spinnerElement.stop().css( opacity: 0 );

share|improve this answer

answered Mar 28 at 15:22

GrafiCodeGrafiCode

1,37422 gold badges1818 silver badges1919 bronze badges

answered Mar 28 at 15:22

GrafiCodeGrafiCode

1,37422 gold badges1818 silver badges1919 bronze badges

answered Mar 28 at 15:22

GrafiCodeGrafiCode

1,37422 gold badges1818 silver badges1919 bronze badges