如何在几秒钟后连续改变css?

时间:2016-01-06 08:01:15

标签: javascript jquery html css

我想连续几秒后将笔画值黑色变为白色。

这是我的脚本

<script>
$(document).ready(function(){
    $('svg').css({'stroke':'#000'});
})
</script>

3 个答案:

答案 0 :(得分:3)

我以为你的意思是

$(function(){
    setInterval(function() { $('svg').toggleClass("white") },2000);
});

但你实际上是指

&#13;
&#13;
$(function(){
    var stroke = $('circle').attr("stroke");
    setInterval(function() { 
      stroke = stroke=="white"?"black":"white"
      $('circle').attr("stroke",stroke) 
    },2000);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

与pss和jQuery相似的

Try this

$(document).ready(function() {
   setInterval(function() {
   $("circle").attr("stroke", "white");
     setTimeout(function() {
       $("circle").attr("stroke", "black");
     }, 500);
   }, 1000);
});

答案 2 :(得分:1)

您可以使用recursive function概念来实现您的目标

在下面的代码中,您不断更改状态代码,颜色也会相应更改。这里函数changeColorFunc每2秒调用一次

看看下面的 JS FIDDLE

$(document).ready(function() {
  setInterval(function() {
    changeColor(1);
}, 2000);
});


var changeColor = function changeColorFunc (status) {
    if (status == 1) {
       $("circle").attr("class", "white");
      setInterval(function() {
                    changeColorFunc (0);
      }, 2000);
    }
    if (status == 0) {
       $("circle").attr("class", "black");
      setInterval(function() {
                    changeColorFunc (1);
      }, 2000);
    }
}

<强> JS FIDDLE