jQuery animate（）不透明度

Question

我正在创建一个画板，将鼠标悬停在div网格上会产生效果。 效果取决于所选的单选按钮。 使用CSS可能有更好的方法，但是构建此代码的目的是练习Javascript和jQuery，所以这就是我试图做到的效果。

代码： https ： //jsfiddle.net/xc3w1z9m/

全屏视图： https : //jsfiddle.net/xc3w1z9m/embedded/result/

问题1）除“足迹”效果外，每种效果均按预期方式工作。 “拖尾”效果应该在“鼠标悬停”时在div中逐渐消失为完全不透明，然后在“鼠标悬停”时使其逐渐消失为透明。 由于不断进行调整，我的代码现在有点集群，但是“ mouseover”和“ mouseout”的事件处理程序已经到位。 “ mouseout”事件处理程序不起作用。

以下事件处理程序的放置似乎会影响它是否起作用。

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

如果我将其放在现在的位置，它将无法正常工作。 如果我将其放在第27行（在另一个事件处理程序中），它确实可以工作。 我很犹豫，因为我不确定在事件处理程序中是否有一个事件处理程序是否是一个好主意。

有任何想法吗？

问题2）此问题与div有时不能覆盖网格的整个高度有关。 例如，按“重置网格”并将其设置为100x100（输入100）。 这些盒子并不能填满整个网格的高度，但是根据我的计算，它应该可以。 底部和侧面有时还会留出一些空间，用于其他条目，例如17。大多数40x40以下的网格尺寸会填满整个高度和宽度。

我正在使用以下计算：

• 通过将网格的总大小除以每行/高度的div数来确定每个div的大小。 网格的总大小为480x480px，因此，如果用户输入20，则计算将为480/20，每个框应为24x24px。
• 通过乘以每行和高度所需的框数来确定所需的单个div数。 如果用户希望使用20x20的网格，则应生成400格。

对任何一个问题的帮助将不胜感激！

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。 您需要找出一个更好的划分块的系统。