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（）方法允许我们延迟队列中跟随它的函数的执行。它可以与标准效果队列一起使用，也可以与自定义队列一起使用。只有队列中的后续事件才会延迟;

作为替代方法，而不是使用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');
});

Answer 2

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

了解jQuery中的优先级

2 个答案: