Javascript 如何创建一系列jquery/js动画？_Javascript_Jquery_Particles

Javascript 如何创建一系列jquery/js动画？

javascript jquery

Javascript 如何创建一系列jquery/js动画？,javascript,jquery,particles,Javascript,Jquery,Particles,我对js有点不在行，但我搞砸了，想出了 <head> <script type="text/javascript" src="http://scurker.com/projects/particles/js/particle.js"></script> <script type="text/javascript" src="http://scurker.com/projects/particles/js/jquery.js"></

我对js有点不在行，但我搞砸了，想出了

<head>
    <script type="text/javascript" src="http://scurker.com/projects/particles/js/particle.js"></script>
  <script type="text/javascript" src="http://scurker.com/projects/particles/js/jquery.js"></script>
  <script type="text/javascript" src="http://scurker.com/projects/particles/js/jquery-ui.js"></script>
  <script type="text/javascript">

var particles;
window.onload = function() {  
  var canvas = document.getElementById('particle_canvas');
  particles = new ParticleCanvas(canvas, {x: 470});
 };

var effects = { 

  blue: {
    shape: 'circle',
    velocity: new Vector({y: -0.35}),
    color: '#0000ff',
    opacity: 1,
    onDraw: function(p) {
      p.opacity = 0.251 - (p.age / p.life) * 0.25;
    }
  },

  red: {
    shape: 'circle',
    velocity: new Vector({y: -3}),
    color: '#ff0000',
    opacity: 1,
    onDraw: function(p) {
      var y = -this.age * 3;
      p.size *= 0.98;
      p.opacity = 0.5 - (p.age / p.life * 0.4);
    }
  },
};

$.fn.toJson = function() {
  var json = {};
  $.each(this.serializeArray(), function() {
    json[this.name] = this.value !== null ? this.value : null;
  });
  return json;
};

function loadPreset(val) {
  var obj;  
  if((obj = effects[val])) {
    particles.update(obj);
    for(var i in obj) {
      var value = (obj[i] instanceof Vector) ? -obj[i].y : obj[i];
      $(':input[name=' + i + ']').val(value);
    }
    $('input').change();
  }
}


$(document).ready(function() {

  $('#controls :input').change(function() {
    particles.update($('#controls :input').toJson());
 particles.start();
  });

  $('select').change(function() { loadPreset(this.value); });
});

  </script>
</head>
     <body>
         <div id="particle_container">
<div id="controls">
  <ul>
    <li>
      <label>Presets: 
        <select>
          <option value="blue">Blue</option>
          <option value="red">Red</option>
        </select>
      </label>
    </li>
  </ul>
</div>
<canvas id="particle_canvas" height="500" width="940"></canvas>

我无法让它在JSFIDLE中工作，但在一个普通的网站上，它会创建一个带有红色或蓝色选项的下拉菜单

选择“红色”时，画布上会显示一些已设置动画的红色零件，从列表中选择“蓝色”时，粒子将变为蓝色

我想做的是删除选择列表，我知道怎么做

但将红色/蓝色动画设置为时间间隔

例如，页面加载，等待2秒钟，然后我希望红色粒子显示5秒钟，就像用户从下拉菜单中选择了红色一样，然后暂停2秒钟，蓝色粒子再次启动5秒钟，就像有人从下拉列表中选择了蓝色一样

因此，基本上，我试图设置粒子以预设的间隔运行，而不是手动选择

我该怎么做

谢谢你的帮助，你能不能在javascript中使用setTimeout

setTimeout(/*do nothing*/,2000); // waiting
// red particles
setTimeout(/* Stop particles after 5 second*/,5000);
setTimeout(/*do nothing*/,2000); // waiting
// blue particles
setTimeout(/* Stop particles after 5 second*/,5000);