jQuery animate() opacity

Question

I'm creating a sketchpad where a mouseover creates an effect on a grid of divs. The effect depends on the radio button selected. There's probably a better way to do this with CSS, but the point of building this was to practice Javascript and jQuery, so that's how I'm trying to do the effects.

Code: https://jsfiddle.net/xc3w1z9m/

Full screen view: https://jsfiddle.net/xc3w1z9m/embedded/result/

Problem 1) Each effect works as expected except for the "Trail" effect. The "Trail" effect is supposed to fade in the div to full opacity upon "mouseover", and then fade it out to transparent on "mouseout". My code is a bit of a cluster right now, because of constant adjustments, but the event handlers for "mouseover" and "mouseout" are in place. The "mouseout" event handler isn't working.

The placement of the following event handler seems to effect whether it works.

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

If I place it where it is now, it doesn't work. If I place it on line 27 (within the other event handler), it does work. I'm hesitant to do this because I'm not sure if it's a good idea to have an event handler within an event handler.

Any ideas?

Problem 2) This problem has to do with the divs sometimes not covering the full height of the grid. For example, press "Reset Grid" and set it to 100x100 (enter 100). The boxes don't fill up the entire height of the grid, but by my calculations it should. There's also a little space left at the bottom and the sides sometimes for other entries, such as 17. Most grid sizes below 40x40 fill up the entire height and width.

I'm using the following calculations:

• Determine the size of each individual div by dividing the total size of the grid by the number of divs per row/height. The total size of the grid is 480x480px, so if the user enters 20, the calculation would be 480/20, and each box should be 24x24px.
• Determine the number of individual divs needed by multiplying the number of boxes needed per row and height. If the user wants a 20x20 grid, 400 divs should be generated.

Help with either problem would be much appreciated!

Answer 1

Problem 1) Try this 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;

Problem 2)

You are getting rounding errors, I think: eg 480/100 = 4 in integer, leaving 80 behind. You need to figure out a better system of dividing the blocks.