Question

我认为这对于那些jQuery / javascript编写者来说应该非常简单。我有一排div。我希望他们能够照亮＆＃34;点亮＆＃34;一个接一个，像一个老电影大帐篷。我开始考虑使用.animate.removeClass添加和删除类，但我不确定如何循环使用div。我想我会使用for循环或简单的条件if (class=on).next.addClass("on").previous.removeClass("off")你能说我不懂javascript语法吗？

我知道CSS动画关键帧的基础知识，所以我继续创建原型。它很丑陋，很重，但它表明了这个想法：

#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更喜欢CSS3解决方案;但不幸的是，大多数用户仍然使用过时的浏览器，并且您希望在大多数浏览器版本上具有兼容性。所以我为你做了这样的事情（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);
});

创建选框样式动画

1 个答案: