循环播放一些SVG元素

问题描述：

我有一些来自Raphaël.js的图标，我希望在页面加载时顺序淡入淡出。循环播放一些SVG元素

这里我建的图标：

function navBar() { 
    var icon={/* lots of path strings */}, 
    fill = { 
     fill:"#666", 
     stroke:"none", 
     opacity:0 // opacity is initially 0; would like to loop through this 
    }, 
    stroke = { 
     stroke:"#fff", 
     "stroke-width":3, 
     "stroke-linejoin":"round", 
     opacity:0 
    }; 

    for (var name in icon) { 
     var r = Raphael(0, 0, 40, 40), 
      s = r.path(icon[name]).attr(stroke).translate(4, 4), 
      Icon = r.path(icon[name]).attr(fill).translate(4, 4), 
      Path = document.getElementById("path"), 
      none = {fill: "#000", opacity: 0}; 

     (function (icon, path, s, name) { 
      r.rect(0, 0, 38, 38).attr(none).hover(function() { 
       s.stop().animate({opacity: 1}, 200); 
      }, function() { 
       s.stop().attr({opacity: 0}); 
      }); 
     })(Icon, icon[name], s, name); 


     // Here I'm able to fade all of the icons in at the same time 
     (function (icon) {   
      Icon.animate({opacity:1},200); 
     })(Icon); 

    } 
}

而不是在同一时间消失的所有图标，因为我已经在脚本的最后完成，我怎么能环通过他们和他们褪色每个人都在一个接一个地稍微延迟一段时间？

答

也许你需要在创建opr之后为它们设置动画。已经完成了。这里是一个模拟：http://jsfiddle.net/r75hh/

像这样左右。

// creating 
var icon = new Raphael ... 
... 
icon.attr("rel", "icon") 

// the last line in navBar() 
animateIcons(); 


// animating 
function animateIcons() { 
    // assuming jQuery in use 
    var icons = $("elementTagNameOfIcon[rel='icon']"); 
    var i = 0; 
    var f = function(){ 
     var icon = icons.get(i); 
     if (icon) { 
      $(icon).animate({opacity:1}, 200, function(){ 
       f(); 
      }); 
      i++; 
     } 
    }; 
    f(); 
}

循环播放一些SVG元素

相关推荐