jQuery 数组 mouseenter 没有正确调用函数

Question

我正在尝试为朋友在网站上编写 android 5.0 效果。但是，该函数仅在第一个数组项 $LiArray[0] 和其他两个数组项的 none 上调用。我检查了我的逻辑，并尽可能多地调试。每次 mouseenter 事件都会更改变量，但调用函数时，变量会变为全局值。此外，当功能完成时，背景（我正在尝试制作动画的东西）变为透明，然后淡化为正确的颜色。你们谁能告诉我这里有什么问题吗？

这是我的代码：

$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 标签不允许作为 UL、
没有绝对需要在 A 中使用 P（因为我们正在将 A 移动到它们应该在的位置并且在 LI 元素中）
将所有 JS 包装在 /* */ :)
并使用：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;
}

jQuery 数组 mouseenter 没有正确调用函数

jQuery array mouseenter not calling functions properly

arrays

jquery

mouseenter