CODEWITHSUNDEEP
jquerycss
Richard Tinkler
Richard Tinkler

Reputation: 1643

Understanding priorities in jQuery

We want to change the properties of an input tag, wait a little, then change the properties back:

    $('input[name=produkt-rueckruf-telefon]')
        .val('Danke. Wir melden uns gleich!')
        .css({'background' : 'none'})
        .css({'border' : 'none'})
        .css({'color' : '#fff'});
    $('input[name=produkt-rueckruf-telefon]')
        .delay(3000);       
    $('input[name=produkt-rueckruf-telefon]')
        .val('')
        .css({'border' : '1px solid #fff'})
        .css({'color' : '#525353'})
        .css({'background' : '#fff'});

Thanks in advance for any tips on what we're doing wrong here!

Upvotes: 0

Views: 47

Answers (2)

iambriansreed
iambriansreed

Reputation: 22241

Use setTimeout https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout.

var
    style1 = {'background':'none','border':'none','color':'#fff'},
    style2 = {'background':'#fff','border':'1px solid #fff','color':'#525353'};

$('input[name=produkt-rueckruf-telefon]')
    .val('Danke. Wir melden uns gleich!').css(style1);

setTimeout(function(){
    $('input[name=produkt-rueckruf-telefon]').css(style2);
},3000);

Upvotes: 0

PSL
PSL

Reputation: 123739

Use setTimeout instead of delay, delay works on animation queues.

var $input = $('input[name=produkt-rueckruf-telefon]')
        .val('Danke. Wir melden uns gleich!')
        .css({'background' : 'none'})
        .css({'border' : 'none'})
        .css({'color' : '#fff'});
window.setTimeout(function(){
       $input.val('')
        .css({'border' : '1px solid #fff'})
        .css({'color' : '#525353'})
        .css({'background' : '#fff'});
}, 3000);

.delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed;

As an alternate approach instead of setting inline style with css add/remove classes.

.withValue{
   background : none;
   border : none;
   color : #fff;
   /*Rules*/
}

.withOutValue{
   background : #fff;
   border : 1px solid #fff;
   color : #525353;
   /*Rules*/
}

and

var $input = $('input[name=produkt-rueckruf-telefon]')
        .val('Danke. Wir melden uns gleich!').addClass('withValue');
window.setTimeout(function(){
       $input.val('').addClass('withOutValue').removeClass('withValue');
       //or use toggleClass
       //$input.val('').toggleClass('withOutValue withValue');
});

Upvotes: 3

Related Questions