Как изменить толщину границ и пульсировать цвета границ таблицы HTML с помощью jQuery, пока щелчок не будет обнаружен «в другом месте»?

Question

У меня есть веб-приложение GAS, которое содержит таблицу с <tr contenteditable="false" id="pmlist'+ index+'"> тегами строк.Я хочу создать событие, позволяющее редактировать содержимое и поменять отметку границы с 1px на 3px и пульсировать между черным и белым для длины строки (чтобы указать, что эта строка редактируется),затем, когда пользователь щелкает в любом месте за пределами выделенной строки, contenteditable устанавливается обратно на false, пиксель границы возвращается на 1px, а цвет возвращается к статическому белому.

Это то, что я имею до сих пор:

HTML:

       $(document).on("click","tr", function(e){
         e.preventDefault();
         $(e.currentTarget).attr("contenteditable", "true");
//         border: 1px solid black;
//         $('#'+e.currentTarget.id).css("border", "3px solid");

         for (var i = 0; i < 3; i++ ) {
           $('#'+e.currentTarget.id)
            .animate( { backgroundColor: "#f00" }, 2000 ) //I need to change this to border color and thickness
            .animate( { backgroundColor: "transparent" }, 2000 );

         }
   //Then create an event to revert editions to normal : bordercolor: black, 
   //borderthickness: 1px, 
       });

Я ценю помощь, если решение не может быть предложено, я также буду признателен за указаниясвязанные документы.

Answer 1

Вы не можете без использования плагинов.

С http://api.jquery.com/animate/ "Все анимированные свойства должны быть анимированы в одно числовое значение, кроме как указано ниже; большинство свойств, которые не являются числовыми, не могутбыть анимированными с использованием основных функций jQuery (например, ширина, высота или слева могут быть анимированы, но цвет фона не может быть, если не используется плагин jQuery.Color) "И также с учетом того, что" Сокращенные свойства CSS (например, шрифт, фон, border) поддерживаются не полностью. "

Вам необходим плагин для перехода цвета границы" свойство border-color игнорируется методом $ .animate () ".Например, попробуйте это: https://bitstorm.org/jquery/color-animation/ 2,7 КБ минимизировано.

Так что включите плагин

script src = "// cdn.jsdelivr.net/jquery.color-animation/1 / mainfile "

определяет правила границ в css

и выполняет анимацию, которую вы хотите, для свойства в цикле for:

.animate ({borderColor: '#f00 '}, 2000) .animate ({borderWidth:' 3px '}, 2000)