jquery - 了解 jQuery 中的优先级

Question

我们要更改输入标签的属性，稍等片刻，然后再将属性改回来:

    $('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'});

在此先感谢您提供有关我们在这里做错的任何提示!

Answer 1

使用setTimeout delay 而不是 delay适用于动画队列。

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;

作为一种替代方法，而不是使用 css 添加/删除类来设置内联样式。

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

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

和

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