Question

我正在创建一个草图板，其中鼠标悬停会在div网格上创建一个效果。效果取决于所选的单选按钮。使用CSS可能有更好的方法来实现这一点，但建立这个的重点是练习Javascript和jQuery，以便我尝试做这些效果。

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

问题1）每个效果都按预期工作，除了＆＃34; Trail＆＃34;影响。＆＃34; Trail＆＃34;效果应该在div中淡化为完全不透明度，然后将鼠标悬停在＃34; mouseout＆＃34;上，然后将其淡化为透明效果。我的代码现在是一个集群，因为不断调整，但事件处理程序为＆＃34; mouseover＆＃34;和＃34; mouseout＆＃34;到位了。＆＃34; mouseout＆＃34;事件处理程序不起作用。

以下事件处理程序的位置似乎会影响它是否有效。

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

如果我把它放在现在的位置，它就不起作用了。如果我将它放在第27行（在另一个事件处理程序中），它确实有效。我对此犹豫不决，因为我不确定在事件处理程序中是否有一个事件处理程序是个好主意。

有什么想法吗？

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

我使用以下计算：

通过将网格的总大小除以每行/每个高度的div数来确定每个div的大小。网格的总大小为480x480px，因此如果用户输入20，则计算结果为480/20，每个框应为24x24px。
通过乘以每行和每个高度所需的方框数来确定所需的单个div数。如果用户想要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。你需要找出一个更好的分块系统。

jQuery animate（）opacity

1 个答案: