CODEWITHSUNDEEP
javascriptjqueryajax
ian
ian

Reputation: 313

set timeout in ajax success function

I am having a hard time getting the syntax right to set a timeout in my ajax success function. What I want to happen is for .auction_box to turn #A3D1A3 for 5 seconds and then for it to turn #FFF. Here is the function:

success: function (result) {
if (result == 'ok') {
    setTimeout(function () {
    $('.auction_box').animate({
        'backgroundColor': '#A3D1A3'
    }, 500,
    }
    function (data) {
        $('.auction_box').css('background-color', '#FFF');
    });
}
}

Upvotes: 1

Views: 6699

Answers (4)

Andy
Andy

Reputation: 63514

Why don't use CSS transitions instead? I think it's much simpler. Something like this:

CSS

.auction_box {
  background-color: blue;
}

.new {
  background-color: #A3D1A3;
  transition: background-color 5000ms linear;
}

.white {
  background-color: white;
}

jQuery

$('.auction_box').addClass('new').addClass('white');

DEMO

Upvotes: 0

Avery246813579
Avery246813579

Reputation: 309

You didn't set the timeout time for the setTimeout function. Two parameters are required, a function to be executed (which you have) and a number in milliseconds to wait before executing the code.

Checkout this page for more info: https://www.w3schools.com/jsref/met_win_settimeout.asp

Your code should be something like:

success: function (result) {
if (result == 'ok') {
    setTimeout(function () {
    $('.auction_box').animate({
        'backgroundColor': '#A3D1A3'
    }, 500,
    }
    function (data) {
        $('.auction_box').css('background-color', '#FFF');
    }, 5000);
}
}

Upvotes: 1

bhansa
bhansa

Reputation: 7504

Something like this: 

.auction_box{
width:100px;
height:100px;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="auction_box"></div>

<script>
var result = 'ok';
if (result == 'ok') {
    $('.auction_box').animate({
        'backgroundColor': '#A3D1A3'
    }, 500);
    setTimeout(
    function (data) {
        $('.auction_box').css('background-color', '#000');
    },5000);
}
</script>

Upvotes: 0

Gautam Rai
Gautam Rai

Reputation: 2505

you should set color '#FFF' inside timeout function.

below is the code:

   success: function (result) {
       if (result == 'ok') {
           $('.auction_box').animate({
            'backgroundColor': '#A3D1A3'
            }, 500);

     setTimeout(function () {
            $('.auction_box').css('background-color', '#FFF');
        } , 5000);
      }
    }

Upvotes: 0

Related Questions