jQuery CSS, как избежать мерцания?

Question

jQuery CSS, как избежать мерцания?

0

Я делаю это, чтобы применить некоторый стиль к классической таблице (классическая таблица = tr с только th или td в ней.

$('table').css({
        'border-collapse': 'collapse',
        'margin': 'auto'
    })
    .attr({ 'cellpadding': '5px' })
    .find('tr')
    .css({
        'border-left': '1px solid black',
        'border-right':'1px solid black'
    })
    .find('th')
    .parent()
    .css({
        'border':'1px solid rgb(50,170,180)',
        'border-left': '10px solid rgb(0,120,130)',
        'border-right':'10px solid rgb(0,120,130)',
        'font-size': '2em'
    });

Единственная проблема заключается в том, что этот код находится в функции " refresh() ". Поэтому, когда он вызывал, если в таблице ничего не изменилось, все еще есть "мерцание", потому что стиль, который он применяет первым, находится во всех " tr ", тогда, только после этого, измените его на tr которые содержат th (через parent()), чтобы показать им "больше".

Другими словами: tr, которые содержат th клетки имеют большой дисплей. Я хочу, чтобы он не мерцал.

Как бы вы это сделали?

Olivier Pons 31 март 2014, в 14:05

Источник

0

Вы не можете назвать это, только если что-то изменилось?
aurbano 31 март 2014, в 11:36
2

Почему бы не использовать какие-либо правила CSS вместо этого?
A. Wolff 31 март 2014, в 11:38
0

Потому что я хочу, чтобы он был полным jQuery (см. Doonoo.fr )
Olivier Pons 31 март 2014, в 11:41
0

Вы все еще можете добавлять / удалять в DOM любые теги <style> , я бы вместо этого пошел на это
A. Wolff 31 март 2014, в 11:43

Показать ещё 2 комментария

Теги:

jquery

css

2 ответа

0

Вы должны использовать CSS для этих стилей, а затем jQuery .addClass чтобы динамически применять их к элементам, если это необходимо..

Joel 31 март 2014, в 09:14

Ещё вопросы

Вы не можете назвать это, только если что-то изменилось?
Почему бы не использовать какие-либо правила CSS вместо этого?
Потому что я хочу, чтобы он был полным jQuery (см. Doonoo.fr )
Вы все еще можете добавлять / удалять в DOM любые теги <style> , я бы вместо этого пошел на это

Olivier Pons · Accepted Answer · 2014-03-31T10-27-00.000Z

Решение, которое я придумал, это:

    /* select tr that contain only th and not td */
    el.find("tr:has(th):not(:has(td))").css({
        'border':'1px solid rgb(50,170,180)',
        'border-left': '10px solid rgb(0,120,130)',
        'border-right':'10px solid rgb(0,120,130)',
        'font-size': '2em'
    });
    /* select tr that contain only td and not th */
    el.find("tr:has(td):not(:has(th))").css({
        'font-size': '1.4em'
    });