0xD34F

Пробовал приспособить setTimeout, пробовал им вызывать функцию, а к функции присвоить название.. Но не сработало..
Что я делаю не так?

Не знаю, что вы делаете не так - вы же не показали, как вы пытались использовать setTimeout. Осмелюсь предположить, что вы контекст потеряли.

Да, можно сделать гораздо проще. Элементу задаёте transition:

#red {
  transition: opacity 0.2s;
}

Определяете класс, который будет изменять значение opacity:

#red.hidden {
  opacity: 0.5;
}

И переключаете его по клику:

$('#red').click(e => $(e.target).toggleClass('hidden'));

// или

document.querySelector('#red').addEventListener('click', e => {
  e.target.classList.toggle('hidden');
});

const splitArr = (arr, chunks) =>
  Array.from(
    { length: chunks },
    (_, c) => arr.filter((n, i) => i % chunks === c)
  );

или

const splitArr = (arr, chunks) =>
  arr.reduce((acc, n, i) => (
    (acc[i % chunks] = acc[i % chunks] || []).push(n),
    acc
  ), []);

const options = [ 'first', 'second', 'third', 'fourth' ];
const $table = $('table');

$('button').click(function() {
  $table.append(`
    <tr>
      <td>
        <select>
          <option disabled selected>-</option>
          ${options.map(n => `<option>${n}</option>`).join('')}
        </select>
      </td>
      <td>
        <button class="del">del</button>
      </td>
    </tr>
  `);

  updateDisabled();
});

$table
  .change(updateDisabled)
  .on('click', '.del', function() {
    $(this).closest('tr').remove();
    updateDisabled();
  });


function updateDisabled() {
  const $select = $table.find('select');
  const selectedOptions = $select.get().map(n => n.value);

  $select.find('option').prop('disabled', function() {
    return selectedOptions.includes(this.value);
  });
}

Потому, что

1. Вместо просто числа следует указывать пиксели: 300 ---> '300px'.

2. jsfiddle по умолчанию оборачивает код в window.onload, соответственно, функция, которую вы пытаетесь вызывать в инлайновом обработчике клика, не является глобальной. Используйте querySelector + addEventListener вместо инлайнового обработчика. (UPD. Исправили эту дичь, неактуально).

#xxxten.big {
  width: 300px;
}

document.querySelector('#xxxten').addEventListener('click', function() {
  this.classList.toggle('big');
});

Ну так result у вас массив, а ключи добавляемых ему свойств не являются числовыми - соответственно, отбрасываются при преобразовании в строку.

Объявите result как объект - var result = {}; - и всё будет нормально.

document.querySelector('button').addEventListener('click', function() {
  const bar = document.querySelector('#progress');
  const label = document.querySelector('#procent');

  let width = 0;
  const interval = setInterval(function() {
    if (++width >= 100) {
      clearInterval(interval);
    }

    bar.style.width = label.innerText = `${width}%`;
  }, 10);
});

document.querySelectorAll('.news-item_title').forEach(n => {
  n.querySelector('.tit_link').textContent = '[Подробнее]';
  n.closest('.news-block_item').append(n);
});

или (этот способ перебора и предыдущий не взаимозаменяемые - если for...of можно без проблем комбинировать с querySelectorAll, то чтобы тут использовать forEach, придётся коду получения элементов добавить обёртку - [...document.getElementsByClassName('...')]):

for (const n of document.getElementsByClassName('tit_link')) {
  n.innerText = '[Подробнее]';
  n.parentNode.parentNode.appendChild(n.parentNode);
}

или

const items = document.querySelector('.news-block_wrap').children;
for (let i = 0; i < items.length; i++) {
  items[i].children[1].children[0].innerHTML = '[Подробнее]';
  items[i].insertAdjacentElement('beforeend', items[i].children[1]);
}

Делаете функцию, которая подсчитывает общую сумму - обходите строки таблицы, берёте значения цены и количества каждого товара, перемножаете, складываете, пишите полученное значение в инпут суммы заказа:

function updateSum() {
  const sum = $('.order-table .number').get().reduce((acc, n) => {
    const price = +$(n).prev().text().replace(',', '.');
    const count = +$('input', n).val();
    return acc + price * count;
  }, 0);

  $('.order-end-form input[type="text"]').val(sum.toFixed(2));
}

Вызывать эту функцию следует при клике на +/-, и при редактировании инпутов с количествами:

$('.order-table')
  .on('click', '.plus, .minus', function() {
    const change = $(this).hasClass('plus') ? 1 : -1;
    $(this).siblings('input').val((i, val) => Math.max(0, +val + change));
    updateSum();
  })
  .on('input', '.number input', function() {
    $(this).val((i, val) => Math.max(0, val | 0));
    updateSum();
  });

А вы знаете, что такое new Date(2017, 0, 1)? Это первое января текущего года. То есть, условие (new Date()) > ts всегда оказывается истинным, и... ну да, выставляется дата, на 27 дней больше текущей. Ничего удивительного, что у вас постоянно происходит "обновление счета". Вы уж разберитесь, к какому моменту времени надо делать обратный отсчёт.

const a = [ 'a', 'b', 'c', 'd' ];
const b = [ 'a', 'b', 'x', 'y', 'z' ];

const c = a.filter(n => b.indexOf(n) === -1);
// или
const c = a.filter(n => !b.includes(n));

Или, можно решить задачу в более общем виде. Пусть в качестве источников данных выступают не только массивы, а любые массивоподобные объекты; их элементы не обязательно являются примитивными значениями; а под равенством может подразумеваться не непосредственное равенство, а равенство некоторых производных значений:

function diff(data1, data2, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set(Array.from(data2, getKey));
  return Array.prototype.filter.call(data1, n => !keys.has(getKey(n)));
}


diff([1, 2, 3], [2]) // [1, 3]
diff([{id: 1}, {id: 2}, {id: 3}], [{id: 1}, {id: 3}], 'id') // [{id: 2}]
diff('AbCdE', 'aBc', n => n.toLowerCase()) // ['d', 'E']

Почему не работает:

Если функция parseInt встречает символ, не являющийся числом в указанной системе счисления, она пропускает этот и все последующие символы

Ну а получить своё число вы можете так, например: +/\d+/.exec(el).

Ошибка же при вычислении $(window).offset(). Не надо так. Есть scrollY - можно использовать его:

const $menu = $('.menu');
const offset = $menu.offset();

$(window).scroll(function() {
  $menu.toggleClass('menu-fixed', this.scrollY >= offset.top);
});

<select>
  <option hidden></option>
  <option>вкладка 69</option>
  <option>вкладка 187</option>
  <option>вкладка 666</option>
</select>

<div>
  <div class="tab">hello, world!!</div>
  <div class="tab">fuck the world</div>
  <div class="tab">fuck everything</div>
</div>

.tab {
  display: none;
}

.tab.active {
  display: block;
}

document.querySelector('select').addEventListener('change', function() {
  document.querySelectorAll('.tab').forEach((n, i) => {
    n.classList.toggle('active', i === this.selectedIndex - 1);
  });
});

for (const n of document.getElementsByClassName('name')) {
  n.style.display = 'none';
}

или

.hidden {
  display: none;
}

document.querySelectorAll('.name').forEach(n => n.classList.add('hidden'));

const $picker = $('.datepicker-here');
$picker.datepicker({
  onRenderCell(date, cellType) {
    if (cellType === 'day') {
      const picker = $picker.data('datepicker');
      const selectedDate = picker && picker.selectedDates[0];
      if (selectedDate && date > selectedDate && date <= +selectedDate + 86400000 * 3) {
        return {
          disabled: true,
        };
      }
    }
  },
});

Добавьте return this в конец каждого метода.

Задать элементу transition:

.item {
  transition: transform 1s;
}

Определить класс, который будет задавать смещение:

.move {
  transform: translateY(150px);
}

Переключать класс при клике:

$(document).on('click', '.item', function() {
  $(this).toggleClass('move');
});

https://jsfiddle.net/rx2tgc0m/

ИЛИ

Можно обойтись без js - перед элементом прячем чекбокс; сам элемент делаем label'ом, который будет переключать состояние этого чекбокса; смещаем элемент, если перед ним находится отмеченный чекбокс:

<input type="checkbox" id="xxx">
<label class="item" for="xxx">
  ...

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .item {
  transform: translateY(150px);
}

https://jsfiddle.net/56y7vwjd/

Есть такая штука - делегирование называется.

Пример с добавлением новых элементов.