Как удалить класс CSS с некоторым эффектом, используя jQuery?

Question

Как удалить класс CSS с некоторым эффектом, используя jQuery?

0

У меня есть таблица HTML. Это одна из строк:

<tr class="mattersRow">

    <td colspan="4"> … </td>
    <td class="editableCell qbmatter" colspan="14"> … </td>
    <td class="editableCell workDate" colspan="4"> … </td>
    <td class="editableCell hours" colspan="2"> … </td>
    <td class="editableCell person" colspan="6"> … </td>
    <td class="rate" colspan="2"> … </td>
    <td class="editableCell amount" colspan="4"> … </td>
    <td align="center">
        <input id="check4" type="checkbox"></input>
    </td>

</tr>

Последний столбец содержит флажок. Когда я проверяю/снимаю флажок, я хочу добавить/удалить класс css для этой строки.

$("input[type=checkbox]").click(function () {    
            if ($(this).is(':checked')) {
                // Mark this Row Yellow
                $(this).closest('tr').addClass('warning');                        
            }
            else {
                // Remove Yellow mark and put back danger if needs
                $(this).closest('tr').removeClass('warning');
            }
        });

Этот класс делает целый ряд желтого цвета. В основном я хочу сделать это с некоторым эффектом. Например, когда я снимаю галочку, этот "Желтый" падает... Как это сделать в jQuery? Является ли это возможным?

Bryuk 12 дек. 2013, в 23:54

Источник

0

jsfiddle.net/eh3ER
voodoo417 12 дек. 2013, в 22:12
0

Можете ли вы предоставить образец кода? Я не знаком с переходом ...
Bryuk 12 дек. 2013, в 22:15

Теги:

javascript

jquery

html

css

2 ответа

-1

 $(this).closest('tr').animate( { backgroundColor: 'red'}, '2000');

см. здесь: http://api.jquery.com/animate/

douweegbertje 12 дек. 2013, в 20:20

0

Нет, мне нужно удалить этот класс, а не просто поменять фон
Bryuk 12 дек. 2013, в 22:08
0

Цвета не могут быть анимированы без плагина в jQuery: For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used , source: api.jquery.com/animate
Jasper 12 дек. 2013, в 22:11
0

Затем оживите материал, который у вас есть в этом классе, как я. Если вы прочитаете мою ссылку, вы увидите, что можете добавить все. Изменение ширины и т. Д. Для удаления бита, наоборот.
douweegbertje 12 дек. 2013, в 22:11

Показать ещё 1 комментарий

Ещё вопросы

Можете ли вы предоставить образец кода? Я не знаком с переходом ...
Нет, мне нужно удалить этот класс, а не просто поменять фон
Цвета не могут быть анимированы без плагина в jQuery: For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used , source: api.jquery.com/animate
Затем оживите материал, который у вас есть в этом классе, как я. Если вы прочитаете мою ссылку, вы увидите, что можете добавить все. Изменение ширины и т. Д. Для удаления бита, наоборот.

Jasper · Accepted Answer · 2013-12-12T21-14-00.000Z

Вы можете сделать это с помощью CSS, но он будет работать только в современных браузерах, поддерживающих transitions CSS:

tr {
    -webkit-transition : background-color 500ms ease-in-out;
    -moz-transition : background-color 500ms ease-in-out;
    -ms-transition : background-color 500ms ease-in-out;
    -o-transition : background-color 500ms ease-in-out;
    transition : background-color 500ms ease-in-out;
}

Вот демонстрация: http://jsfiddle.net/eh3ER/1/

Примечание. Это только для того, чтобы затухать в/из цвета, для чего-то вроде анимации "push" или "pull" потребуется несколько элементов (я считаю).

Кроме того, вот большой ресурс для поддержки браузера по многим функциям: http://caniuse.com/#feat=css-transitions (эта ссылка приведет вас непосредственно к transitions CSS)

Спасибо! Интересно =) Буду тратить время на чтение переходов =)
@Bryuk Посмотрите документы MDN, если вы этого еще не сделали, они великолепны: developer.mozilla.org/en-US/docs/Web/CSS/transition