jQuery animate() opacity

Question

Я создаю альбом, в котором мышь создает эффект на сетке div. Эффект зависит от выбранного переключателя. Вероятно, лучший способ сделать это с помощью CSS, но для этого нужно было практиковать Javascript и jQuery, так вот как я пытаюсь сделать эффекты.

Код: https://jsfiddle.net/xc3w1z9m/

Просмотреть в полноэкранном режиме: https://jsfiddle.net/xc3w1z9m/embedded/result/

Проблема 1) Каждый эффект работает, как ожидалось для эффекта "Trail", за исключением. Эффект «Trail» должен исчезать в div до полной непрозрачности на «mouseover», а затем исчезать до прозрачного «mouseout». Мой код сейчас немного кластер, из-за постоянных настроек, но обработчики событий для «mouseover» и «mouseout» находятся на своем месте. Обработчик событий mouseout не работает.

Возможно, размещение следующего обработчика событий влияет на его работу.

$('grid-box').on('mouseout', function(){ 
    $(this).animate({ 
    opacity: 0 
    }, 500); 
}); 

Если я размещаю его там, где он есть сейчас, он не работает. Если я поместил его в строке 27 (в пределах другого обработчика события), это сработает. Я не решаюсь сделать это, потому что я не уверен, что это хорошая идея иметь обработчик событий в обработчике событий.

Любые идеи?

Задача 2) Эта проблема связана с делениями, которые иногда не покрывают всю высоту сетки. Например, нажмите «Сбросить сетку» и установите значение 100x100 (введите 100). Ящики не заполняют всю высоту сетки, но по моим расчетам она должна. Внизу также немного места, а стороны иногда для других записей, например 17. Большинство размеров сетки ниже 40x40 заполняют всю высоту и ширину.

Я использую следующие расчеты:

• Определить размер каждого отдельного DIV путем деления общего размера сетки по количеству дивы в строке/высоту. Общий размер сетки составляет 480x480 пикселей, поэтому, если пользователь вводит 20, расчет будет составлять 480/20, а каждый ящик должен быть 24x24px.
• Определите количество отдельных разделов, необходимых для умножения числа полей, необходимых для каждой строки и высоты. Если пользователю нужна сетка 20x20, должно быть создано 400 div.

Помогите с любой проблемой будет очень признателен!

Answer 1

Проблема 1) Тест https://jsfiddle.net/xcnwtnt2/1/

  case 'trail': 
       var e = $(this); 
       $(e).stop(); 
       $(this).animate({ 
        opacity: 1 
       },200); 
       $(this).mouseout(function(_e) { 
        $(e).animate({ 
         opacity: 0 
        },200); 
       }); 
       break; 

Задача 2)

Вы получаете ошибки округления, я думаю: например, 480/100 = 4 в целом, оставляя 80 позади. Вам нужно выяснить лучшую систему разделения блоков.