Понимание приоритетов в jQuery

Question

Понимание приоритетов в jQuery

0

Мы хотим изменить свойства входного тега, немного подождать, а затем изменить свойства:

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

Спасибо заранее за любые советы о том, что мы делаем неправильно здесь!

Richard Tinkler 12 нояб. 2013, в 18:28

Источник

3

Это не то место, где вы используете delay которая используется в очередях анимации, вместо этого используйте setTimeout.
PSL 12 нояб. 2013, в 17:29

Теги:

jquery

css

2 ответа

0

Используйте 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);

iambriansreed 12 нояб. 2013, в 16:26

Ещё вопросы

Это не то место, где вы используете delay которая используется в очередях анимации, вместо этого используйте setTimeout.

PSL · Accepted Answer · 2013-11-12T15-55-00.000Z

Используйте setTimeout вместо 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 add/remove classes.

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

+1 для добавления / удаления классов вместо изменения нескольких встроенных стилей.