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。 您需要找出一個更好的划分塊的系統。