jQuery array mouseenter not calling functions properly

Question

I'm trying to program an android 5.0 effect on a website for a friend. However, the function is only called on the first array item, $LiArray[0] respectively, and none of the other two array items. I've checked my logic, and I've debugged as much as I can. the variable changes for every mouseenter event, but when the function is called, the variable defects to the global value. Also, when the function is completed, the background (the thing i'm trying to animate) turns transparent and then fades to the proper coloure. Could any of you tell me whats wrong here?

Here's my code :

$alpha = 0;
$beta = $alpha;

$(document).ready(function() {
    $LiArray = [];

    for ( $LiA = 0; $LiA < 3; $LiA++ ) {
        $LiArray.push( $('.LiLi')[ $LiA ] );
    };

    circleCircle = function($n) {
        $d = 0.0;
        $any = $n;

        subCircles = function() {
            $n.css("background", "radial-gradient(circle, #FFCA28 0%, #FFCA28 " + $d + "%, #F06292 " + $d + "%, #F06292 100%)");

            $d += 0.5;

            if ($d >= 100.0) {
                clearInterval($LiInterval);
                $n.css("background", "#FFCA28");
            };
        };

        stopper = function($anything) {
            clearInterval($LiInterval);
            $anything.css("background", "#F06292");
        };

        $LiInterval = setInterval(subCircles, 0.5); 
    };

    $($LiArray[0]).mouseenter(function() { $beta = $alpha; $alpha = 0; });
    $($LiArray[1]).mouseenter(function() { $beta = $alpha; $alpha = 1; });
    $($LiArray[2]).mouseenter(function() { $beta = $alpha; $alpha = 2; });

    $($LiArray[$alpha]).mouseenter(function() { circleCircle($($LiArray[$alpha])); });
    $($LiArray[$alpha]).mouseleave(function() { stopper($any); });
});

Answer 1

• A tag is not allowed as immediate child of UL,
• there's no absolute need to use P inside A (since we're moving A where they should be and that's inside the LI element)
• Wrap all your JS in /* */ :)
  and use: https://jsfiddle.net/hr34oakg/3/

div#navbar ul li a{
    font-size:20px;       /* moved here */
    color:#000;           /* moved here */
    text-decoration:none; /* ADDED */
    margin-top: 5px;
    margin-right: 8px;
    height: 65px;
    width: 65px;
    line-height:65px;     /* ADDED */
    position: relative;
    display: inline-block;
    text-align: center;
    background: no-repeat #F06292 none center / 0;
    float: right;
    border-radius: 20px;
    box-shadow: 0 0 8px 0 #000000;
    -webkit-transition: 1000ms ease;
    -moz-transition:    1000ms ease;
    -o-transition:      1000ms ease;
    transition:         1000ms ease;
}
div#navbar ul li a:hover {
    background: no-repeat #F06292 radial-gradient(circle, #FFCA28 0%, #FFCA28 50% , #F06292 50%, #F06292 100%) center / 150%;
    border-radius: 50%;    /* Use 50% for circles */
    box-shadow: 0 0 4px 0 #000000;
    -webkit-transition: 500ms ease-out;
    -moz-transition:    500ms ease-out;
    -o-transition:      500ms ease-out;
    transition:         500ms ease-out;
}