Why doesn't Jquery fadeOut() work? Hide() does

jquery ajax hide fadeout
Hans picture Hans · Nov 26, 2013 · Viewed 10.7k times · Source

After an Ajax result I'm trying to fadeOut a html button. This works most of the time, however sometimes the button isn't faded out and I can't figure out why.

$.ajax({
    type: frm.attr('method'),
    url: frm.attr('action')+'?time='+timestamp,
    data: frm.serialize(),
    dataType: 'json',
    success: function (data) {
        if(data['success'] === true){
            hideSaveButton();
        }
    }
});

function hideSaveButton(){
    $('#saveBtn').fadeOut(250);
}

Accessing the hideSaveButton() function doesn't seem to be a problem. It's just the fadeOut() function that isn't working. I tried replacing fadeOut() by hide() which works without any problem.

Any ideas?

Answer

Abhitalks picture Abhitalks · Nov 26, 2013

It seems that the calls are being made in quick succession. Which means that the fadeOut fires before the earlier one has finished.

You may want to stop() before you attempt the fadeOut():

$('#saveBtn').stop().fadeOut(250);

More info: http://api.jquery.com/stop/

Related questions

JQuery and Ajax: show/hide div

I have this example. When I click, a dynamic content load via Ajax. In the loaded page there is a link, that could close the div. It works, but when the div is closed (with hide()), the click on link …

Read More
jQuery AJAX submit form

I have a form with name orderproductForm and an undefined number of inputs. I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the …

Read More
How do I return the response from an asynchronous call?

I have a function foo which makes an asynchronous request. How can I return the response/result from foo? I tried returning the value from the callback, as well as assigning the result to a local variable inside the function …

Read More