javascript - 创建选取框样式动画

Question

我认为这对于那些 jQuery/javascript 编写者来说应该非常简单。我有一排 div。我希望它们一个接一个地“点亮”，就像老电影的字幕一样。我开始考虑使用 .animate.removeClass 添加和删除类，但我不确定如何在 div 之间循环。我想我会使用 for 循环或简单的条件 if (class=on).next.addClass("on").previous.removeClass("off") 你能看出我不懂 javascript 语法吗？

我确实了解 CSS 动画关键帧的基础知识，所以我继续创建了一个原型(prototype)。它很丑，很重，但它显示了这个想法:

#wrap{
    width: 220px;
}
.dot
{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    background : black;
}
#one{
    background-color: black;
    -webkit-animation:one 4s infinite; 
    animation:one 4s;
}
#two{
    background-color: black;
    -webkit-animation:two 4s infinite;  
}
#three{
    background-color: black;
    -webkit-animation:three 4s infinite;    
}
#four{
    background-color: black;
    -webkit-animation:four 4s infinite;     
}
@-webkit-keyframes one{
    0% {background:black;}
    6% {background:black;}
    8% {background: red;}
    13% {background : black;}
}
@-webkit-keyframes two{
    0% {background:black;}
    10% {background:black;}
    12% {background: red;}
    16% {background : black;}
}
@-webkit-keyframes three{
    0% {background:black;}
    14% {background:black;}
    16% {background: red;}
    20% {background : black;}
}
@-webkit-keyframes four{
    0% {background:black;}
    18% {background:black;}
    20% {background: red;}
    24% {background : black;}
}

还有 div，您可以看到我从哪里开始考虑 addClass

<div id="one" class="dot off"></div>
<div id="two"class="dot off"></div>
<div id="three"class="dot off on"></div>
<div id="four"class="dot off"></div>

Answer 1

如果你想知道真相，我更喜欢 CSS3 解决方案而不是 JavaScript 解决方案；但不幸的是，大多数用户仍在使用过时的浏览器，并且您希望在大多数浏览器版本上具有兼容性。所以我为你做了这样的事情 ( fiddle )，我希望这是你想要的:

HTML:

<div id="wrap">
    <div id="one" class="dot off"></div>
    <div id="two" class="dot off"></div>
    <div id="three" class="dot off on"></div>
    <div id="four" class="dot off"></div>
</div>

CSS:

#wrap {
    width: 220px;
}
.dot {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    background : black;
}
.dot.on { background: red !important }

jQuery:

$(function() {
    var $wrap = $("#wrap"); // Caching the wrapper element
    // This function will check to see if we have any element 
    // with .on class inside wrapper. If not, the first .dot will get an .on class.
    // If there is any .dot with .on class we will find the next sibling to it
    // and then remove .on class from former element and add .on to next item.
    function goNext() {
        if ($wrap.find(".dot.on").length) { // if we have any .on
            var $on = $wrap.find(".dot.on"); // Caching current .on element
            var $next = $wrap.find(".dot.on").next(); // Finding next item
            $on.removeClass('on'); // removing .on class from current active item
            if ($next.length) { // If there are any next sibling
                $next.addClass('on'); // Next item gets an .on class
            } else { // if current item is the last one
                goNext(); // Call current function again and give first item .on class
            }
        } else { // If we don't have any .on item
            $wrap.find(".dot:first").addClass('on'); // give .on class to first .dot
        }
    }
    // Creating a timer to call the function every 0.5 seconds
    setInterval(function(){ goNext () }, 500);
});