Question

我试图在网站上为朋友编写Android 5.0效果。但是，该函数仅分别在第一个数组项$ LiArray [0]上调用，而不调用其他两个数组项。我已经检查了我的逻辑，并且我已经尽可能地调试了。每个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的直接子项
并非绝对需要在P内使用A（因为我们将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没有正确调用函数

1 个答案: